Директива NgForm

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

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

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

<form #myForm="ngForm">

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

К примеру, определим следующий компонент AppComponent:

import { Component} from "@angular/core";
import { FormsModule, NgForm} from "@angular/forms";

class User{
    constructor(public name: string,
        public email: string,
        public phone: string){}
}
 
@Component({
    selector: "my-app",
    imports: [FormsModule],
    styles: ` 
        input.ng-touched.ng-invalid {border:solid red 2px;}
        input.ng-touched.ng-valid {border:solid green 2px;}
    `,
    template: `<form #myForm="ngForm" novalidate>
                    <p>
                        <label>Имя</label><br>
                        <input name="name" [(ngModel)]="name" required />
                    </p>
                    <p>
                        <label>Email</label><br>
                        <input name="email" ngModel 
                            required email />
                    </p>
                    <p>
                        <label>Телефон</label><br>
                        <input name="phone" ngModel 
                            required pattern="[0-9]{10}" />
                    </p>
                    <button [disabled]="myForm.invalid" (click)="submit(myForm)">Добавить</button>
                </form>
                <p>Имя: {{myForm.value.name}}</p>
                <p>Email: {{myForm.value.email}}</p>`
})
export class AppComponent { 
 
    name: string = "";
    email: string = "";
    phone: string = "";
     
    submit(form: NgForm){
        console.log(form);
    }
}

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

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

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

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

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

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

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

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

<button [disabled]="myForm.invalid"

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

onSubmit(myForm: NgForm){
	
	console.log(myForm);
}

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

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

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

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

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

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

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

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

import { Component} from "@angular/core";
import { FormsModule, NgForm} from "@angular/forms";

class User{
    constructor(public name: string,
        public email: string,
        public phone: string){}
}
 
@Component({
    selector: "my-app",
    imports: [FormsModule],
    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)">
                    <p>
                        <label>Имя</label><br>
                        <input name="name" ngModel required />
                    </p>
                    <p>
                        <label>Email</label><br>
                        <input name="email" ngModel 
                            required email />
                    </p>
                    <p>
                        <label>Телефон</label><br>
                        <input name="phone" ngModel 
                            required pattern="[0-9]{10}" />
                    </p>
                    <input type="submit" [disabled]="myForm.invalid" value="Отправить" />
                </form>`
})
export class AppComponent { 
 
    name: string = "";
    email: string = "";
    phone: string = "";
     
    onSubmit(form: NgForm){
        console.log(form);
    }
}

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