Как правило, при работе с формами все элементы ввода не определяются сами по себе, а помещаются в стандартный элемент формы - <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", standalone: true, 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", standalone: true, 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()
, который определен в компоненте. Используя этот метод, мы
можем либо тут же обработать отправляемые данные, либо провести какую-то предобработку до отправления дальше на сервер.