Reactive Forms

В прошлых темах был описан подход Template-Driven, который концентрировался вокруг шаблона компонента: для работы с формой и ее элементами в шаблоне компонента к элементам html применялись директивы NgModel и NgForm, правила валидации задавались в тегах элементов с помощью атрибутов required и pattern. Но есть альтернативный подход — использование реактивных форм (Reactive Forms). Рассмотрим, в чем он заключается.

При подходе Reactive Forms для формы создается набор объектов FormGroup и FormControl. Сама форма и ее подсекции представляют класс FormGroup, а отдельные элементы ввода — класс FormControl. Например, базовое создание формы:

myForm: FormGroup = new FormGroup();

Добавляем в форму элементы:

myForm: FormGroup = new FormGroup({
    userName: new FormControl(),
    userEmail: new FormControl(),
});

Здесь определено два элемента: userName и userEmail.

Объект FormControl может иметь различные формы определения. В частности, в качестве первого параметра можно передавать значение по умолчанию для элемента, а в качестве второго параметра — набор валидаторов:

myForm: FormGroup = new FormGroup({
    userName: new FormControl('Tom', Validators.required),
    userEmail: new FormControl('', [
        Validators.required,
        Validators.pattern(
            '[a-zA-Z_]+@[a-zA-Z_]+?.[a-zA-Z]{2,3}'
        ),
    ]),
});

Здесь к элементу userEmail применяется валидатор Validators.required, который требует обязательного наличия значения. Если валидаторов несколько, то они заключаются в массив. Все встроенные валидаторы можно посмотреть в документации.

Для привязки объекта myForm к конкретному элементу формы применяется атрибут formGroup:

<form [formGroup]="myForm"></form>

Кроме того, необходимо связать объекты FormControl с элементами ввода с помощью атрибута formControlName:

<input name="name" formControlName="userName" />

Данный элемент будет связан с объектом "userName": new FormControl("Tom").

Теперь рассмотрим, как эти объекты будут взаимодействовать с шаблоном компонента. Для этого определим следующий компонент:

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

@Component({
    selector: 'my-app',
    styles: [
        `
            input.ng-touched.ng-invalid {
                border: solid red 2px;
            }
            input.ng-touched.ng-valid {
                border: solid green 2px;
            }
        `,
    ],
    template: `
        <form
            [formGroup]="myForm"
            novalidate
            (ngSubmit)="submit()"
        >
            <div class="form-group">
                <label>Имя</label>
                <input
                    class="form-control"
                    name="name"
                    formControlName="userName"
                />

                <div
                    class="alert alert-danger"
                    *ngIf="
                        myForm.controls['userName']
                            .invalid &&
                        myForm.controls['userName'].touched
                    "
                >
                    Не указано имя
                </div>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input
                    class="form-control"
                    name="email"
                    formControlName="userEmail"
                />

                <div
                    class="alert alert-danger"
                    *ngIf="
                        myForm.controls['userEmail']
                            .invalid &&
                        myForm.controls['userEmail'].touched
                    "
                >
                    Некорректный email
                </div>
            </div>
            <div class="form-group">
                <label>Телефон</label>
                <input
                    class="form-control"
                    name="phone"
                    formControlName="userPhone"
                />
            </div>
            <div class="form-group">
                <button
                    class="btn btn-default"
                    [disabled]="myForm.invalid"
                >
                    Отправить
                </button>
            </div>
        </form>
    `,
})
export class AppComponent {
    myForm: FormGroup;
    constructor() {
        this.myForm = new FormGroup({
            userName: new FormControl(
                'Tom',
                Validators.required
            ),
            userEmail: new FormControl('', [
                Validators.required,
                Validators.pattern(
                    '[a-zA-Z_]+@[a-zA-Z_]+?.[a-zA-Z]{2,3}'
                ),
            ]),
            userPhone: new FormControl(),
        });
    }

    submit() {
        console.log(this.myForm);
    }
}

Для отображения ошибок валидации здесь используется блоки div, в которых определены выражения типа

*ngIf="myForm.controls['userName'].invalid && myForm.controls['userName'].touched">

С помощью выражений myForm.controls['userName'] мы можем обратиться к нужному элементу формы и получить его состояние или значение. В данном случае если значение поля ввода невалидно, и при этом поле ввода уже получало фокус, то отображается ошибка валидации.

Но чтобы все это заработало, необходимо импортировать модуль ReactiveFormsModule. Для этого изменим модуль приложения AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule {}

Определение валидаторов

Кроме использования встроенных валидаторов мы также можем определять свои валидаторы. К примеру, определим в классе компонента валидатор:

export class AppComponent {
    myForm: FormGroup;
    constructor() {
        this.myForm = new FormGroup({
            userName: new FormControl('Tom', [
                Validators.required,
                this.userNameValidator,
            ]),
            userEmail: new FormControl('', [
                Validators.required,
                Validators.pattern(
                    '[a-zA-Z_]+@[a-zA-Z_]+?.[a-zA-Z]{2,3}'
                ),
            ]),
            userPhone: new FormControl(),
        });
    }
    submit() {
        console.log(this.myForm);
    }
    // валидатор
    userNameValidator(
        control: FormControl
    ): { [s: string]: boolean } {
        if (control.value === 'нет') {
            return { userName: true };
        }
        return null;
    }
}

По сути валидатор представляет обычный метод — в данном случае метод userNameValidator. В качестве параметра он принимает элемент формы, к которому этот валидатор применяется, а на выходе возвращает объект, где ключ — строка, а значение равно true.

В данном случае проверяем, если значение равно строке "нет", то возвращаем объект {"userName": true}. Значение true указывает, что элемент формы не прошел валидацию. Если же все нормально, то возвращаем null.

Затем этот валидатор добавляется к элементу:

"userName": new FormControl("Tom", [Validators.required, this.userNameValidator])

И в случае если в поле для ввода имени будет введено значение "нет", то данное поле не пройдет валидацию:

Массивы элементов и FormArray

Некоторые элементы на форме могут относиться к одному и тому же признаку. Например, в анкете пользователя могут попросить указать номера телефоно, которыми он владеет. Их может быть несколько, но они будут представлять один и тот же признак — "номера телефонов". То есть логично было бы объединить все поля для ввода номеров телефонов в массив. И в Angular 2 мы легко можем реализовать подобную возможность с помощью класса FormArray.

Итак, изменим код компонента AppComponent следующим образом:

import { Component } from '@angular/core';
import {
    FormGroup,
    FormControl,
    Validators,
    FormArray,
} from '@angular/forms';

@Component({
    selector: 'my-app',
    styles: [
        `
            input.ng-touched.ng-invalid {
                border: solid red 2px;
            }
            input.ng-touched.ng-valid {
                border: solid green 2px;
            }
        `,
    ],
    template: `
        <form
            [formGroup]="myForm"
            novalidate
            (ngSubmit)="submit()"
        >
            <div class="form-group">
                <label>Имя</label>
                <input
                    class="form-control"
                    name="name"
                    formControlName="userName"
                />

                <div
                    class="alert alert-danger"
                    *ngIf="
                        myForm.controls['userName']
                            .invalid &&
                        myForm.controls['userName'].touched
                    "
                >
                    Не указано имя
                </div>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input
                    class="form-control"
                    name="email"
                    formControlName="userEmail"
                />

                <div
                    class="alert alert-danger"
                    *ngIf="
                        myForm.controls['userEmail']
                            .invalid &&
                        myForm.controls['userEmail'].touched
                    "
                >
                    Некорректный email
                </div>
            </div>
            <div formArrayName="phones">
                <div
                    class="form-group"
                    *ngFor="
                        let phone of myForm.controls[
                            'phones'
                        ].controls;
                        let i = index
                    "
                >
                    <label>Телефон</label>
                    <input
                        class="form-control"
                        formControlName="{{ i }}"
                    />
                </div>
            </div>
            <div class="form-group">
                <button
                    class="btn btn-default"
                    (click)="addPhone()"
                >
                    Добавить телефон
                </button>
                <button
                    class="btn btn-default"
                    [disabled]="myForm.invalid"
                >
                    Отправить
                </button>
            </div>
        </form>
    `,
})
export class AppComponent {
    myForm: FormGroup;
    constructor() {
        this.myForm = new FormGroup({
            userName: new FormControl('Tom', [
                Validators.required,
            ]),
            userEmail: new FormControl('', [
                Validators.required,
                Validators.pattern(
                    '[a-zA-Z_]+@[a-zA-Z_]+?.[a-zA-Z]{2,3}'
                ),
            ]),
            phones: new FormArray([
                new FormControl('+7', Validators.required),
            ]),
        });
    }
    addPhone() {
        (<FormArray>this.myForm.controls['phones']).push(
            new FormControl('+7', Validators.required)
        );
    }
    submit() {
        console.log(this.myForm);
    }
}

Теперь поля для ввода телефонных номеров представлют массив:

"phones": new FormArray([
        new FormControl("+7", Validators.required)
])

Массив или FormArray хранит набор объектов FormControl. И в данном случае добавляется один такой объект.

Чтобы можно было динамически при необходимости добавлять новые объекты, в классе компонента предусмотрен метод addPhone():

addPhone(){
    (<FormArray>this.myForm.controls["phones"]).push(new FormControl("+7", Validators.required));
}

В этой сложной конструкции мы сначала получаем объект формы через выражение this.myForm.controls["phones"], затем приводим его к типу FormArray. И далее как и в обычный массив добавляем через метод push новый элемент.

В коде html предусматриваем вывод объектов на форму с помощью директивы ngFor:

<div formArrayName="phones">
    <div
        class="form-group"
        *ngFor="let phone of myForm.controls['phones'].controls; let i = index"
    >
        <label>Телефон</label>
        <input
            class="form-control"
            formControlName="{{i}}"
        />
    </div>
</div>

При этом контейнер всех элементов ввода имеет директиву formArrayName="phones". А каждый элемент в качестве названия принимает его текущий индекс: formControlName="{{i}}".

А кнопка "Добавить телефон" позволяет добавить на форму новое поле для ввода еще одного телефонного номера:

FormBuilder

Класс FormBuilder представляет альтернативный подход к созданию форм:

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

@Component({
    selector: 'my-app',
    styles: [
        `
            input.ng-touched.ng-invalid {
                border: solid red 2px;
            }
            input.ng-touched.ng-valid {
                border: solid green 2px;
            }
        `,
    ],
    template: `
        <form
            [formGroup]="myForm"
            novalidate
            (ngSubmit)="submit()"
        >
            <div class="form-group">
                <label>Имя</label>
                <input
                    class="form-control"
                    name="name"
                    formControlName="userName"
                />

                <div
                    class="alert alert-danger"
                    *ngIf="
                        myForm.controls['userName']
                            .invalid &&
                        myForm.controls['userName'].touched
                    "
                >
                    Не указано имя
                </div>
            </div>
            <div class="form-group">
                <label>Email</label>
                <input
                    class="form-control"
                    name="email"
                    formControlName="userEmail"
                />

                <div
                    class="alert alert-danger"
                    *ngIf="
                        myForm.controls['userEmail']
                            .invalid &&
                        myForm.controls['userEmail'].touched
                    "
                >
                    Некорректный email
                </div>
            </div>
            <div formArrayName="phones">
                <div
                    class="form-group"
                    *ngFor="
                        let phone of myForm.controls[
                            'phones'
                        ].controls;
                        let i = index
                    "
                >
                    <label>Телефон</label>
                    <input
                        class="form-control"
                        formControlName="{{ i }}"
                    />
                </div>
            </div>
            <div class="form-group">
                <button
                    class="btn btn-default"
                    (click)="addPhone()"
                >
                    Добавить телефон
                </button>
                <button
                    class="btn btn-default"
                    [disabled]="myForm.invalid"
                >
                    Отправить
                </button>
            </div>
        </form>
    `,
})
export class AppComponent {
    myForm: FormGroup;
    constructor(private formBuilder: FormBuilder) {
        this.myForm = formBuilder.group({
            userName: ['Tom', [Validators.required]],
            userEmail: [
                '',
                [
                    Validators.required,
                    Validators.pattern(
                        '[a-zA-Z_]+@[a-zA-Z_]+?.[a-zA-Z]{2,3}'
                    ),
                ],
            ],
            phones: formBuilder.array([
                ['+7', Validators.required],
            ]),
        });
    }
    addPhone() {
        (<FormArray>this.myForm.controls['phones']).push(
            new FormControl('+7', Validators.required)
        );
    }
    submit() {
        console.log(this.myForm);
    }
}

FormBuilder передается в качестве сервиса в конструктор. С помощью метода group() создается объект FormGroup. Каждый элемент передается в форму в виде обычного массива значений:

"userName": ["Tom", [Validators.required]]

Результат работы компонента будет аналогичным предыдущему.

Комментарии