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

Вступление

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

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

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

Начиная

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

Шаг 1: Регистрация модуля реактивных форм

Реактивные формы регистрируются путем импорта ReactiveFormsModule из пакета @ angular / forms и добавления его в массив импорта вашего NgModule.

Код TypeScript:

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Демонстрация в реальном времени:

См. Форму Pen ReactiveForm_registering по w3resource ( @ w3resource ) в CodePen .

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

Мы генерируем компонент для управления, используя следующую команду

ng generate component NameEditor

Класс FormControl является основным строительным блоком при использовании реактивных форм. Чтобы зарегистрировать один элемент управления формы, импортируйте класс FormControl в свой компонент и создайте новый экземпляр элемента управления формы, чтобы сохранить его в качестве свойства класса.

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

Шаг 3: Регистрация элемента управления в шаблоне

Код TypeScript:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

Демонстрация в реальном времени:

См. Pen реактивныйForm_registeringFormControl от w3resource ( @ w3resource ) в CodePen .

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

<label>
  Name:
  <input type="text" [formControl]="name">
</label>

Отображение компонента

Элемент управления формы, присвоенный имени, отображается при добавлении компонента в шаблон.

Код TypeScript:

<app-name-editor></app-name-editor>

Управление контрольными значениями

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

Отображение значения элемента управления формы

Вы можете отобразить значение следующими способами:

• Через наблюдаемое значение valueChanges можно прослушивать изменения значения формы в шаблоне с помощью AsyncPipe или в классе компонентов с помощью метода subscribe ().
• Со значением свойства. который дает вам снимок текущего значения.

В следующем примере показано, как отобразить текущее значение с помощью интерполяции в шаблоне.

имя-editor.component.html

<p>
  Value: {{ name.value }}
</p>

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

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

Генерация элементов управления формы с FormBuilder

Сервис FormBuilder предоставляет удобные методы для генерации элементов управления.

Шаг 1. Импорт класса FormBuilder

Импортируйте класс FormBuilder из пакета @ angular / forms.

профильный editor.component.ts

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

Шаг 2: внедрение службы FormBuilder

Сервис FormBuilder является поставщиком для инъекций, который поставляется с модулем реактивных форм. Добавьте эту зависимость, добавив ее в конструктор компонента.

профильный editor.component.ts

constructor(private fb: FormBuilder) { }

Шаг 3: Генерация элементов управления формы

Сервис FormBuilder имеет три метода: control (), group () и array (). Это фабричные методы для генерации экземпляров в ваших классах компонентов, включая элементы управления формой, группы форм и массивы форм.

profile.editor.component.ts (построитель форм)

Код TypeScript:

import { Component } from '@angular/core';
import { FormBuilder } from '@angular/forms';
 
@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = this.fb.group({
    firstName: [''],
    lastName: [''],
    address: this.fb.group({
      street: [''],
      city: [''],
      state: [''],
      zip: ['']
    }),
  });
 
  constructor(private fb: FormBuilder) { }
}

Демонстрация в реальном времени:

См. Pen profile-editor.component.ts от w3resource ( @ w3resource ) в CodePen .

Предыдущая: Трубы
Далее: Шаблон управляемых форм