Разница между Template-driven и Reactive формами в Angular
Что такое формы в Angular?
В Angular есть два подхода к созданию форм:
- Template-driven forms — формы, построенные на основе шаблонов (HTML).
- Reactive forms — формы, управляемые из TypeScript-кода.
Сравнительная таблица
| Характеристика | Template-driven Forms | Reactive Forms |
|---|---|---|
| Основа | HTML-шаблон | TypeScript-код |
| Модуль | FormsModule | ReactiveFormsModule |
| Управление | Декларативное (через шаблон) | Императивное (через код) |
| Подход | Легкий, декларативный | Гибкий, программный |
| Валидация | Через HTML-атрибуты + директивы | Через API и методы |
| Тестирование | Сложнее | Легче |
| Подходит для | Простых форм | Сложных/динамических форм |
Пример Template-driven формы
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<input name="username" ngModel required />
<input name="email" ngModel email />
<button type="submit">Отправить</button>
</form>
onSubmit(form: NgForm) {
console.log(form.value);
}
- Используется
ngModelдля привязки данных. - Директивы (
required,email) для валидации. - Логика находится в шаблоне.
Пример Reactive формы
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);
}
<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 |
Важно:
Оба подхода можно комбинировать, но лучше выбрать один и придерживаться его на протяжении всего проекта для единообразия.