PassFront
  1. PassFront
  2. База знаний
  3. Формы, роутинг и HTTP

Чем 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 — быстро для простых случаев.

Другие вопросы раздела