Чем Reactive Forms отличаются от Template-driven Forms в Angular?
Формы, роутинг и HTTP
Reactive Forms описывают модель формы в коде компонента, Template-driven строятся директивами в шаблоне.
Reactive Forms
form = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [Validators.required, Validators.minLength(8)]),
});
submit() {
if (this.form.valid) this.api.login(this.form.getRawValue());
}
// шаблон: <form [formGroup]="form" (ngSubmit)="submit()"> <input formControlName="email">- Модель явная, типизированная, легко тестировать.
- Удобно динамически добавлять поля (
FormArray), писать собственные валидаторы, подписываться наvalueChanges.
Template-driven
<input name="email" [(ngModel)]="user.email" required email>- Меньше кода для простых форм.
- Логика размазана по шаблону, тестировать сложнее.
Выбор
Для сложных форм с валидацией и динамикой — Reactive Forms (стандарт для серьёзных приложений). Для простой формы из пары полей хватит Template-driven.
Коротко для собеседования
Reactive Forms — модель в коде, предсказуемо и тестируемо. Template-driven — быстро для простых случаев.