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

Angular предлагает два основных подхода к обработке пользовательского ввода с помощью форм: реактивный и основанный на шаблонах. Оба подхода основаны на общем API Forms.

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

Я написал статью Intro To Angular Template-driven Forms, где я построил такую же форму, используя подход, основанный на шаблонах.

Я счел полезным построить одну и ту же форму с использованием двух подходов, чтобы лучше оценить различия.

В этом посте я пропущу теорию, но если вы хотите прочитать больше, загляните в бесплатную статью на Medium.

Отправная точка: Создание одного элемента

Прежде всего, нам нужно не забыть импортировать ReactiveFormsModule, потому что он «экспортирует необходимую инфраструктуру и директивы для реактивных форм».

Поэтому мы импортируем ReactiveFormsModule в app.module.ts.

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

и объявляем его в импорте в @NgModule.

imports: [BrowserModule, ReactiveFormsModule],

Шаг 1: Первый элемент в шаблоне

Типовой элемент формы в формах Angular может выглядеть следующим образом:

<div>
  <label for="email">Email</label>
  <input type="email" id="email" [formControl]="email" />
</div>

Это обычный HTML, за исключением [formControl]=»email».

Привязка formControl происходит от FormControlDirective, которая происходит от ReactiveFormsModule, который мы импортировали выше.

Шаг 2: Создание элемента управления в классе

После импорта FormControl мы можем назначить новый экземпляр FormControl для email. FormControl «отслеживает значение и статус проверки отдельного элемента управления формы», angular.io.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
...
export class ReactiveFormComponent {
  email = new FormControl('');
}

В данном случае, используя new FormControl(»), мы устанавливаем начальное значение email в виде пустой строки.

Благодаря FormControl мы можем прослушивать, обновлять и проверять состояние элемента формы.

Вот и все! Вы только что создали свой первый элемент!

От одного элемента к форме

Начиная с вышеупомянутого общего элемента, мы можем создать следующую форму:

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
...
reactiveForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl(''),
    age: new FormControl(''),
});

Обратите внимание, что мы должны импортировать FormGroup из @angular/forms в каждом компоненте, где мы хотим создать новый экземпляр FormGroup.

Мы создали экземпляр FormGroup в классе. FormGroup «отслеживает значение и состояние валидности группы экземпляров FormControl», angular.io.

Затем нам нужно связать модель FormGroup и шаблон с помощью привязки свойств.

Что касается форм, управляемых шаблонами, мы хотим иметь возможность работать с формой в целом, а не с каждым элементом.

.

Первое отличие

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

Второе отличие

Второе отличие заключается в formControlName.

«Ввод formControlName, предоставляемый директивой FormControlName, привязывает каждый отдельный ввод к элементу управления формы, определенному в FormGroup», — говорится на angular.io.

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

Третье отличие

Третье отличие заключается в том, что нам не нужно использовать атрибут name в тегах input.

Краткое резюме

Angular предлагает два основных подхода к построению форм: реактивный и основанный на шаблонах. В этом посте мы рассмотрели реактивный подход.

Оба подхода строятся на основе общего API Forms.

1. Импортируйте модуль ReactiveFormsModule в app.module.ts
2. Используйте new FormControl() для создания элемента управления формой
3. Используйте new FormGroup() для создания группы элементов управления формы
4. Свяжите модель FormGroup в классе с представлением через привязку свойства [FormGroup]=»myFormGroupName»
5. Тег реализует NgForm по умолчанию после импорта ReactiveFormsModule

Не стесняйтесь взглянуть на код на GitHub или прочитать оригинальную статью на Medium (бесплатно).