Быстрое создание простых, но мощных угловых форм

  form = new FormGroup({ fieldname: new FormControl( initial value, synchronous validators, asynchronous validators) }); 

Предположим, что поля электронной почты и пароль будут обязательными. Мы также должны проверить, является ли электронная почта действительной. Кроме того, пароль должен содержать как минимум одну заглавную букву, одну строчную букву и одну цифру. Таким образом, мы будем использовать required валидаторы и валидаторы pattern из класса Validators для обоих полей. Мы оставим их начальные значения в виде пустой строки.

 form = new FormGroup({ email: new FormControl("", [Validators.required, Validators.pattern('[a-zA-z0-9_\.]+@[a-zA-Z]+\.[a-zA-Z]+')]), password: new FormControl("", [Validators.required, Validators.pattern('^(?=.*[0-9])(?=.*[az])(?=.*[AZ]).{8,}$')]) }); 

Теперь нам нужно перейти к шаблону и добавить сообщения проверки. Мы сделаем это так же, как и с шаблонно-управляемыми формами. Однако мы получим доступ к объектам управления другим способом. В нашем компоненте мы можем определить свойство, которое дает нам доступ к элементу управления в виде:

 get email(){ return this.accountForm.get("email"); } 

Мы можем получить доступ к этому свойству в нашем шаблоне. Это означает, что вместо того, чтобы писать this.accountForm.get("email") каждый раз, когда мы хотим указать проверочное сообщение, мы можем использовать только email .

 <div *ngIf="email.touched && email.errors"> <div class="alert alert-danger" *ngIf="email.errors.required"> The email is required </div> </div> <div *ngIf="email.errors"> <div class="alert alert-danger" *ngIf="email.errors.pattern"> The email is not valid </div> </div> 

Таким образом, сообщение «Требуется электронная почта» появится после того, как пользователь коснулся формы и оставил ее пустой, а сообщение «Электронная почта недействительна» появится, когда пользователь печатает. Мы можем отображать сообщения проверки для поля пароля таким же образом.

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

 <button class="btn btn-primary" type="submit" [disabled]="!accountForm.valid">Sign up</button> 

Нам также нужно привязать событие ngSubmit к функции, которая будет вызываться при ngSubmit .

 <form [formGroup]="accountForm" (ngSubmit)="signup()"> 

Затем нам нужно определить эту функцию в контроллере:

 signup(){ console.log(this.accountForm.value); alert('The form was submitted'); this.accountForm.reset(); } 

А пока мы покажем представленные данные в консоли. Мы очистим поля формы после отображения подтверждающего сообщения.

Асинхронная проверка

Было бы здорово, если бы мы могли проверить, используется ли уже отправленное пользователем электронное письмо. Мы можем выполнить такую ​​проверку, даже если пользователь печатает, если мы используем асинхронный валидатор.

Мы будем использовать поддельный API для целей этой демонстрации — JSON Placeholder . Это полезный инструмент для тестирования приложения, поскольку он предоставляет различные виды данных. Например, он может предоставить список пользователей с электронными письмами, который мы представим как список существующих пользователей для нашего демонстрационного приложения. Вы можете отправлять и получать запросы на него так же, как и в реальном API.

Мы создадим службу в нашем приложении, которая подключается к этому JSON API и присоединяет асинхронный валидатор к полю электронной почты. Таким образом, мы сможем проверить, используется ли уже электронная почта.

Сначала мы создадим сервис. Мы можем сделать это через Angular CLI

 ng g service server.service 

Затем мы должны добавить сервис в app.module чтобы мы могли использовать его в приложении:

 import { ServerService } from "./server.service"; @NgModule({ providers: [ ServerService ], bootstrap: [AppComponent] }) 

В нашем сервисе нам нужно импортировать классы Injectable, Http и Observable а также операторы map и filter RxJS. Затем мы укажем URL нашего тестового API. После того, как мы получим результаты, мы отфильтруем их, чтобы увидеть, есть ли у пользователя электронная почта, совпадающая с той, которую набрал пользователь, которую мы передадим ему при выполнении запроса.

 @Injectable() export class ServerService { private url = "http://jsonplaceholder.typicode.com/users"; constructor(private http: Http) { } checkUsers(email: string) { return this.http .get(this.url) .map(res => res.json()) .map(users => users.filter(user => user.email === email)) .map(users => !users.length); } } 

Теперь нам нужно создать валидатор, который будет использовать этот сервис для проверки электронной почты. Мы создадим новый файл машинописного текста custom.validators.ts . Это позволит нам более эффективно разделять наш код и повторно использовать валидатор. Там мы импортируем классы AbstractControl и ValidationErrors а также ServerService .

 import { AbstractControl, ValidationErrors } from '@angular/forms'; import { ServerService } from './server.service'; export class Customvalidators{ static checkDuplicateEmail(serverService: ServerService) { return (control: AbstractControl) => { return serverService.checkUsers(control.value).map(res => { return res ? null : { duplicateEmail: true }; }); }; } } 

Мы создаем экземпляр нашего serverService и вызываем созданный в нем метод checkUsers . Пользовательские валидаторы должны возвращать null если все в порядке, или объект с парами ключ-значение, которые иначе описывают ошибку.

Теперь перейдем к нашему компоненту, чтобы применить асинхронный валидатор к полю электронной почты. Нам также придется импортировать ServerService в компонент и создать его экземпляр, чтобы выполнить запрос к нашему тестовому API.

 import { ServerService } from "../server.service"; constructor(private serverService: ServerService){ } accountForm = new FormGroup({ email: new FormControl("", synchronous validators, Customvalidators.checkDuplicateEmail(this.serverService)) }); 

Осталось только добавить сообщение проверки

 <div *ngIf="email.errors"> <div class="alert alert-danger" *ngIf="email.errors.duplicateEmail"> The email is already in use </div> </div> 

Теперь посмотрим, как выглядит наша форма.
https://sitepoint-editors.github.io/account-registration-form/

Завершение

Как вы можете видеть, Angular позволяет вам делать несколько простых трюков с формами. Вы можете не только быстро создавать простые формы, создавая их на основе шаблонов, но и реализовывать в них сложные функции, если это необходимо.