Question

How do you verify the model changes in forms?

Answer 1

You can add a getter property(let's say, diagnostic) inside component to return a JSON representation of the model during the development. This is useful to verify whether the values are really flowing from the input box to the model and vice versa or not.

export class UserProfileComponent {

  model = new User('John', 29, 'Writer');

  // TODO: Remove after the verification
  get diagnostic() { return JSON.stringify(this.model); }
}

and add diagnostic binding near the top of the form

{{diagnostic}}
<div class="form-group">
  // FormControls goes here
</div>