Директива NgForm

Как правило, при работе с формами все элементы ввода не определяются сами по себе, а помещаются в стандартный элемент формы — <form></form>. Применение данного элемента позволяет управлять всеми элемента ввода вцелом как одной общей формой.

Непосредственно в Angular для работы с формой определена специальная директива NgForm. Она создает объект FormGroup и привязывает его к форме, что позволяет отслеживать состояние формы, управлять ее валидацией.

Мы можем применить данную директиву, определив переменную в теге формы:

<form #myForm="ngForm"></form>

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

К примеру, определим в шаблоне компонента AppComponent следующую форму:

import { Component } from '@angular/core';
import { NgForm } 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 #myForm="ngForm" novalidate>
            <div class="form-group">
                <label>Имя</label>
                <input
                    class="form-control"
                    name="name"
                    [(ngModel)]="name"
                    required
                />
            </div>
            <div class="form-group">
                <label>Email</label>
                <input
                    class="form-control"
                    name="email"
                    ngModel
                    required
                    email
                />
            </div>
            <div class="form-group">
                <label>Телефон</label>
                <input
                    class="form-control"
                    name="phone"
                    ngModel
                    required
                    pattern="[0-9]{10}"
                />
            </div>
            <div class="form-group">
                <button
                    [disabled]="myForm.invalid"
                    class="btn btn-default"
                    (click)="submit(myForm)"
                >
                    Добавить
                </button>
            </div>
        </form>
        <div>Имя: {{ myForm.value.name }}</div>
        <div>Email: {{ myForm.value.email }}</div>
    `,
})
export class AppComponent {
    submit(form: NgForm) {
        console.log(form);
    }
}

Чтобы задействовать директиву NgForm, нужно импортировать ее из пакета @angular/forms:

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

У формы определена переменная #myForm. Причем она инициализирована значением ngForm. То есть эта переменная myForm представляет директиву NgForm, и через эту переменную мы сможем ссылаться на всю форму.

Хотя мы явно не добавляли директиву NgForm, Angular 2 автоматически сам добавляет ее в тег формы. Данная директива добавляет элемену form ряд дополнительных возможностей. В частности, она инкапсулирует все элементы формы, к которым применяется директива ngModel, и позволяет получить доступ к состоянию этих элементов, в том числе проверить введенные данные на корректность. Так, для отслеживания состояния Angular добавляет к тегу форму ряд классов:

<form
    class="ng-pristine ng-untouched ng-valid"
    novalidate=""
></form>

ng-pristine, ng-untouched, ng-valid — это те же классы, которые применяются к элементам управления и которые были рассмотрены в прошлой теме.

Затем мы можем использовать форму. Прежде всего для ее валидации. Во-первых, к форме применяется атрибут novalidate. Этот атрибут отключает отображение встроенных в браузер сообщений об ошибках валидациию. Ведь в нашем случае мы полагаемся на механизм валидации в Angular 2. И, как показывает практика, не всегда валидная форма с точки зрения Angular 2, является валидной и с точки зрения браузера.

Во-вторых, используя состояние формы, мы можем отключить кнопку и соответственно предотвратить некоторые действия по нажатию на нее:

<button [disabled]="myForm.invalid"></button>

И также в методе submit(), который вызывается при нажатии на кнопку, можно получить всю форму и ее значения:

onSubmit(myForm: NgForm){

    console.log(myForm);
}

К элементам формы применяется директива ngModel. Причем только в одном случае используется выражение привязки. Использовать привязку с паре с ngModel в принципе необязательно, хотя, как правило, используется двусторонняя привязка. Данная же директива просто указывает, что поле ввода, к которому она применяется, будет включаться в объект myForm.

При работе с переменной myForm следует учитывать, что она представляет сложный объект, который инкапсулирует всю информацию о форме:

К примеру, через свойство controls мы можем обратиться к элементам формы, к которым применена директива ngModel. Причем названия этих элементов соответствуют значениям атрибутов name у полей ввода.

Для получения введенных значений мы также можем использовать свойство value:

<div>Имя: {{myForm.value.name}}</div>
<div>Email: {{myForm.value.email}}</div>

Но стоит отметить, что наличие доступ к соответствующему элементу возможен, только если к этому элементу применяется директиву ngModel, как в случае выше.

Отправка формы

После заполнения формы пользователь отправляет ее обычно с помощью нажатия на кнопку отправки (<input type="submit">), которая, как правило, помещается в самом низу формы. Но в Angular для управления отправкой формы мы можем использовать событие ngSubmit, которое генерируется при нажатии на кнопку отправки:

import { Component } from '@angular/core';
import { NgForm } 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
            #myForm="ngForm"
            novalidate
            (ngSubmit)="onSubmit(myForm)"
        >
            <div class="form-group">
                <label>Имя</label>
                <input
                    class="form-control"
                    name="name"
                    ngModel
                    required
                />
            </div>
            <div class="form-group">
                <label>Email</label>
                <input
                    class="form-control"
                    name="email"
                    ngModel
                    required
                    email
                />
            </div>
            <div class="form-group">
                <label>Телефон</label>
                <input
                    class="form-control"
                    name="phone"
                    ngModel
                    required
                    pattern="[0-9]{10}"
                />
            </div>
            <div class="form-group">
                <input
                    type="submit"
                    [disabled]="myForm.invalid"
                    class="btn btn-default"
                    value="Отправить"
                />
            </div>
        </form>
    `,
})
export class AppComponent {
    onSubmit(form: NgForm) {
        console.log(form);
    }
}

В данном случае при генерации этого события будет срабатывать метод onSubmit(), который определен в компоненте. Используя этот метод, мы можем либо тут же обработать отправляемые данные, либо провести какую-то предобработку до отправления дальше на сервер.

Комментарии