Різниця між формами, керованими шаблоном, та реактивними формами в Angular

Що таке форми в Angular?

В Angular існує два підходи до створення форм:

Форми на основі шаблонів — форми, побудовані на основі шаблонів (HTML).
Реактивні форми — форми, які керуються з коду TypeScript.

Таблиця порівняння

Характеристика	Форми на основі шаблонів	Реактивні форми
Основи	HTML шаблон	Код TypeScript
Модуль	`FormsModule`	`ReactiveFormsModule`
Управління	Декларативне (через шаблон)	Імперативне (через код)
Підхід	Легкий, декларативний	Гнучкий, програмний
Валідація	Через HTML атрибути + директиви	Через API та методи
Тестування	Більш складне	Легше
Підходить для	Простих форм	Складних/динамічних форм

Приклад форми на основі шаблонів

html

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <input name="username" ngModel required />
  <input name="email" ngModel email />
  <button type="submit">Відправити</button>
</form>

typescript

onSubmit(form: NgForm) {
  console.log(form.value);
}

Використовує ngModel для зв'язування даних.
Директиви (required, email) для валідації.
Логіка в шаблоні.

Приклад реактивної форми

typescript

import { FormGroup, FormControl, Validators } from '@angular/forms';

form = new FormGroup({
  username: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
});

onSubmit() {
  console.log(this.form.value);
}

html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="username" />
  <input formControlName="email" />
  <button type="submit">Відправити</button>
</form>

Управління повністю в коді TS.
Валідація задається в FormControl через Validators.
Краще підходить для складних сценаріїв.

Коли використовувати?

Сценарій	Рекомендований підхід
Проста форма входу	`Template-driven`
Складна динамічна форма з логікою та валідацією	`Reactive`
Потреба в масштабуванні та тестуванні	`Reactive`
Швидка та проста реалізація форми	`Template-driven`

Важливо: Обидва підходи можна комбінувати, але краще вибрати один і дотримуватися його протягом проекту для узгодженості.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Різниця між формами, керованими шаблоном, та реактивними формами в Angular

#Що таке форми в Angular?

#Таблиця порівняння

#Приклад форми на основі шаблонів

#Приклад реактивної форми