Як Angular зв'язує дані форми з моделлю компонента?

Angular зв'язує дані форми з моделлю компонента через двостороннє зв'язування даних (two-way data binding) і систему FormControl.

Механізм залежить від типу форми:

1. Template-driven форми:

• Використовують директиву [(ngModel)], яка зв'язує поле вводу і властивість компонента.

• Коли користувач змінює значення в полі - оновлюється властивість у компоненті, і навпаки.

  html

  Copy

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

Тут user.name завжди відображає поточний стан поля.

2. Reactive форми:

• Кожне поле зв'язане з об'єктом FormControl, який зберігає поточне значення і стан.

• Angular автоматично синхронізує зміни між FormControl і DOM.

  typescript

  Copy

  name = new FormControl('');
  html

  Copy

  <input [formControl]="name">

Тобто Angular сам підтримує синхронізацію між моделлю (об'єктом даних) і представленням (формою).