How does Angular bind form data to the component model?

Angular binds form data to the component model through two-way data binding and the FormControl system.

The mechanism depends on the form type:

1. Template-driven forms:

• Use the [(ngModel)] directive, which binds the input field and the component property.

• When the user changes the field's value, the component property updates, and vice versa.

  html

  Copy

  <input [(ngModel)]="user.name">

Here user.name always reflects the current state of the field.

2. Reactive forms:

• Each field is bound to a FormControl object, which holds the current value and state.

• Angular automatically synchronizes changes between FormControl and the DOM.

  typescript

  Copy

  name = new FormControl('');
  html

  Copy

  <input [formControl]="name">

That is, Angular itself keeps the model (the data object) and the view (the form) in sync.