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.
- Импортируйте модуль ReactiveFormsModule в app.module.ts
- Используйте new FormControl() для создания элемента управления формой
- Используйте new FormGroup() для создания группы элементов управления формы
- Свяжите модель FormGroup в классе с представлением через привязку свойства [FormGroup]=»myFormGroupName»
- Тег реализует NgForm по умолчанию после импорта ReactiveFormsModule
Не стесняйтесь взглянуть на код на GitHub или прочитать оригинальную статью на Medium (бесплатно).