Reactive Forms

Це новий підхід для роботи з формами в реактивному стилі.

Опис форми відбувається в компоненті у вигляді дерева об'єктів, після чого це дерево зв'язується з шаблоном. Всі маніпуляції (валідація, підписка на зміну значення та інше) відбуваються в компоненті, що робить роботу з формами більш гнучкішою, зручнішою та передбачуванішою.

Перш ніж використовувати реактивні форми в компонентах, нам потрібно імпортувати в головному модулі AppModule модуль ReactiveFormsModule, який дозволяє працювати з ними.

app.module.ts

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

@NgModule({
  imports: [ ReactiveFormsModule, //... ]
  //...
})
//...

В реактивних формах використовуються 3 типи блоків:

• FormControl - одиничний контрол форми.

• FormGroup - група контролів форми

• FormArray - масив груп або контролів форми.

this.myForm : FormGroup = new FormGroup({
    'userName': new FormControl('Tom'),
    'userEmail': new FormControl()
});

Але описувати форми більш зручніше, використовуючи спеціальний інструмент FormBuilder

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {
 myForm: FormGroup;

 constructor (
  private fb: FormBuilder
 ) {}
 
 ngOnInit(): void {
  this.myForm = this.fb.group({
    'userName': ['Tom'],
    'userEmail': []
  });
 }
 
 onSubmit(): void {
   console.log(this.myForm.value);
 }
}

app.component.html

<form [formGroup]="myForm"
      (ngSubmit)="onSubmit()">
  <div>
    <label for="name">имя</label>
    <input type="text" id="name" formControlName="userName" />
  </div>
  
  <div>
    <label for="email">email</label>
    <input type="text" id="email" formControlName="userEmail" />
  </div>
  
  <button type="submit">Submit</button>
</form>

Валідація таких форми відбувається за допомогою списку статичних методів класу Validators

  this.myForm = this.fb.group({
    'userName': [
      'Tom',
      Validators.required
     ],
    'userEmail': [
      '',
      [
        Validators.required,
        Validators.email
      ]
    ]
  });

Виведення повідомлень про помилку

Отримати доступ до контрола в компоненті можна наступним чином

this.myForm.controls['userName']

Приклад виведення помилок

app.component.html

<form [formGroup]="myForm"
      (ngSubmit)="onSubmit()">
  <div>
    <label for="name">имя</label>
    <input type="text" id="name" formControlName="userName" />
    
    <div *ngIf="myForm.controls['userName'].invalid && myForm.controls['userName'].touched">
      <span *ngIf="myForm.controls['userName'].errors.required">
        Input is required.
      </span>
    </div>
  </div>
  
  <div>
    <label for="email">email</label>
    <input type="text" id="email" formControlName="userEmail" />
  </div>
  
  <button type="submit">Submit</button>
</form>

app.component.ts