Загрузка...
Загрузка...
Продолжая работу с платформой, вы принимаете условия Политики конфиденциальности и использование файлов cookie.
В Angular есть два подхода к созданию форм:
| Характеристика | Template-driven Forms | Reactive Forms |
|---|---|---|
| Основа | HTML-шаблон | TypeScript-код |
| Модуль | FormsModule | ReactiveFormsModule |
| Управление | Декларативное (через шаблон) | Императивное (через код) |
| Подход | Легкий, декларативный | Гибкий, программный |
| Валидация | Через HTML-атрибуты + директивы | Через API и методы |
| Тестирование | Сложнее | Легче |
| Подходит для | Простых форм | Сложных/динамических форм |
<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) для валидации.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>
| Сценарий | Рекомендуемый подход |
|---|---|
| Простая форма входа | Template-driven |
| Сложная динамическая форма с логикой и валидацией | Reactive |
| Необходимость масштабирования и тестирования | Reactive |
| Быстрая и простая реализация формы | Template-driven |
Важно:
Оба подхода можно комбинировать, но лучше выбрать один и придерживаться его на протяжении всего проекта для единообразия.