How can we verify the model changes in forms?

Web Development
, ,
1

We 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');
  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>