Реактивные формы в Angular

В этом уроке вы узнаете о реактивных формах, предназначенных для работы со сложными сценариями форм в приложениях Angular.

Что такое реактивные формы

Реактивные формы используют программный подход к созданию и управлению формами, обеспечивая большую гибкость и расширенные возможности проверки.

Импорт ReactiveFormsModule

Чтобы использовать реактивные формы, импортируйте ReactiveFormsModule в свой модуль:

import { ReactiveFormsModule } from '@angular/forms';

Создание FormGroup

Определите группу форм в классе компонента:

this.myForm = new FormGroup({
  name: new FormControl('')
});

Связывание формы с шаблоном

Используйте директиву formGroup в шаблоне, чтобы связать его с группой форм:

<form [formGroup]="myForm">
  <input formControlName="name">
</form>

Проверка формы

В реактивные формы легко добавлять средства проверки, чтобы гарантировать корректность введённых данных:

name: new FormControl('', Validators.required)

Обработка отправки формы

Обрабатывайте отправку формы, подписываясь на события отправки в классе компонента:

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

Использование FormBuilder

Сервис FormBuilder упрощает создание форм:

this.myForm = this.fb.group({
  name: ['', Validators.required]
});

Итоги

Теперь вы умеете создавать реактивные формы, обрабатывать проверку и эффективно управлять состоянием формы. Отлично!