Что такое реактивные формы?
«Реактивные формы используют явный и неизменный подход к управлению состоянием формы в данный момент времени. Каждое изменение состояния формы возвращает новое состояние, которое поддерживает целостность модели между изменениями».
Это означает, что короткие реактивные формы дадут доступ к управлению формами во время выполнения. Форма настраивается как в нашем ts-файле, так и в html-файле.
Что контролирует формы во время выполнения?
Если мы хотим добавить поле, когда пользователь вводит форму. Мы можем это контролировать. Например, когда пользователь завершает ввод электронной почты, мы хотели бы добавить поле подтверждения электронной почты и подтвердить его в середине пути пользовательской формы.
В реактивной форме мы легко справимся с этими задачами.
Настройка угловой реактивной формы в app.module.ts
Чтобы начать работу с реактивными формами, сначала мы должны импортировать reactiveFormsModule. Это модуль, который предоставляет angular. Мы просто импортируем reactiveFormsModule из @angular/forms
Конфигурация формы в вашем TS файле
Form-Control: в Angular элементы управления формой — это классы, которые могут содержатьзначения данных и информацию о проверке любого элемента формы.
Form-Group: strong> FormGroup — это набор formControl.
Чтобы структурировать нашу первую реактивную форму, мы импортируем formGroup и formControl из @angular/forms.
Мы присваиваем formGroup переменной. Чтобы настроить наше поле формы, мы присоединяем formControl в качестве структуры объекта, за которым следует ключ в качестве имени формы, а значением будет formControl. Внутри класса formControl мы передаем null, если хотим установить начальное значение, мы передаем значение, как показано ниже.
Визуализация нашей формы в HTML
Мы просто создаем HTML-форму и даем директиву атрибута [formGroup] для подключения нашей группы форм.
Внутри любого элемента ввода мы указываем formControl, чтобы дать элемент управления формой.
(ngSubmit) вызывается, когда мы отправьте нашу форму, нажав кнопку, как отправить. в методе «onsubmit()» мы просто зарегистрируем нашу форму и сможем увидеть все подробности о форме.
Ссылка на StackBlitz
https://stackblitz.com/edit/angular-reactive-basic-form
