ngModel in Angular 2

In Angular 1.0, two-way binding synced the view to the model and the model to the view. In Angular 2.0 this feature doesn’t come right out of the box, but can be implemented as follows:

<div class="form-group">
 <label for="name">Name</label>
 <input type="text" class="form-control" id="name"
 required
 [(ngModel)]="model.name" name="name">
</div>

This syntax in Angular 2 makes a lot of sentence. Property binding [] flows from model to view. Event binding () flows from view to model. The combination of the two, is two way binding that connects the flow in both directions.

Track change-state and validity with ngModel

In addition to two way binding, ngModel gives us 3 things:
1. If the user touched the control
2. If the value changed
3. If the value become invalid

Angular 2 form controls

These built in classes make it easy to provide visual feedback to users (validation, error messages, etc.).

Tags:
No Comments

Post a Comment