在实际工作中，我们经常需要一个基于后端API验证值的验证器。为此，Angular提供了一种定义自定义异步验证器的简便方法。
本文将介绍如何为Angular应用程序创建自定义异步验证器。
通常你会调用一个真正的后端，但是在这里我们将创建一个虚拟的JSON文件，我们可以通过使用Http服务来调用它。如果正在使用Angular CLI，则可以将JSON文件放在/assets文件夹中，它将自动可用；
/assets/users.json
[ { "name": "Paul", "email": "paul@example.com" }, { "name": "Ringo", "email": "ringo@example.com" }, { "name": "John", "email": "john@example.com" }, { "name": "George", "email": "george@example.com" }]注册服务接下来，让我们创建一个具有 checkEmailNotTaken方法的服务，该方法触发对我们的JSON文件的http GET调用。这里我们使用 RxJS的延迟运算符来模拟一些延迟：
signup.service.ts
import { Injectable } from '@angular/core';import { Http } from '@angular/http';import { Observable } from 'rxjs/Observable';import 'rxjs/add/operator/map';import 'rxjs/add/operator/filter';import 'rxjs/add/operator/delay';@Injectable()export class SignupService { constructor(private http: Http) {} checkEmailNotTaken(email: string) { return this.http .get('assets/users.json') .delay(1000) .map(res => res.json()) .map(users => users.filter(user => user.email === email)) .map(users => !users.length); }}请注意我们如何筛选与提供给方法的用户具有相同电子邮件的用户。然后我们再次映射结果并进行测试以确保我们得到一个空置对象。
在真实场景中，您可能还想使用debounceTime和distinctUntilChanged运算符的组合，如我们在创建实时搜索的帖子中所讨论的。引入一些这样的去抖动将有助于将发送到后端API的请求数量保持在最低水平。
组件和异步验证器
我们的简单组件初始化我们的反应形式并定义我们的异步验证器：validateEmailNotTaken。请注意我们的 FormBuilder.group声明中的表单控件如何将异步验证器作为第三个参数。这里我们只使用一个异步验证器，但是你想在数组中包含多个异步验证器：
app.component.ts
import { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';import { SignupService } from './signup.service';@Component({ ... })export class AppComponent implements OnInit { myForm: FormGroup; constructor( private fb: FormBuilder, private signupService: SignupService ) {} ngOnInit() { this.myForm = this.fb.group({ name: ['', Validators.required], email: [ '', [Validators.required, Validators.email], this.validateEmailNotTaken.bind(this) ] }); } validateEmailNotTaken(control: AbstractControl) { return this.signupService.checkEmailNotTaken(control.value).map(res => { return res ? null : { emailTaken: true }; }); }}我们的验证器与典型的自定义验证器非常相似。这里我们直接在组件类中定义了验证器而不是单独的文件。这样可以更轻松地访问我们注入的服务实例。另请注意我们如何绑定此值以确保它指向组件类。
我们还可以在自己的文件中定义我们的异步验证器，以便更容易地重用和分离关注点。唯一棘手的部分是找到一种方法来提供我们的服务实例。在这里，例如，我们创建一个具有createValidator静态方法的类，该方法接收我们的服务实例并返回我们的验证器函数：
/validators/async-email.validator.ts
import { AbstractControl } from '@angular/forms';import { SignupService } from '../signup.service';export class ValidateEmailNotTaken { static createValidator(signupService: SignupService) { return (control: AbstractControl) => { return signupService.checkEmailNotTaken(control.value).map(res => { return res ? null : { emailTaken: true }; }); }; }}然后，回到我们的组件中，我们导入ValidateEmailNotTaken类，我们可以使用这样的验证器：
ngOnInit() { this.myForm = this.fb.group({ name: ['', Validators.required], email: [ '', [Validators.required, Validators.email], ValidateEmailNotTaken.createValidator(this.signupService) ] });}模板
在模板中，事情真的很简单：
app.component.html
<form [formGroup]="myForm"> <input type="text" formControlName="name"> <input type="email" formControlName="email"> <div *ngIf="myForm.get('email').status === 'PENDING'"> Checking... </div> <div *ngIf="myForm.get('email').status === 'VALID'"> Email is available! </div> <div *ngIf="myForm.get('email').errors && myForm.get('email').errors.emailTaken"> Oh noes, this email is already taken! </div></form>您可以看到我们根据电子邮件表单控件上status属性的值显示不同的消息。对于可能的值状态是VALID，INVALID，PENDING和禁用。如果异步验证错误输出我们的emailTaken错误，我们也会显示错误消息。
使用异步验证器验证的表单字段在验证待处理时也将具有ng-pending类。这样可以轻松设置当前待验证字段的样式。
