angular4 - 如何在 Angular 4.0.0 rc.1 中对表单使用 AsyncValidator 接口

Question

Angular 4.0.0 rc.1 于 2017 年 2 月 24 日发布
表单表单有两个变化
：增加了使用浏览器原生验证的选项和 Angular 表单
表单：引入 AsyncValidator 接口
如何为表单使用 AsyncValidator 接口以及我们如何启用浏览器的原生验证？

Answer 1

你会像使用普通的一样使用它Validator。唯一的区别是，您不是返回一个ValidationErrors对象，而是返回一个解析为该ValidatorErrors对象的 Promise 或 Observable。

这是一个例子：

this.formBuilder.group({
  name: ['', [ Validators.required ]],
  email: ['', [ Validators.required ]]
});

这是一个带有必填字段的简单注册表单。现在假设您要调用您的服务器以确保电子邮件尚未在使用中。

重复电子邮件.ts

export class DuplicateEmail {
  constructor(private backendService: BackendService) {}

  validate(c: AbstractControl): Observable<ValidationErrors> {
    return this.backendService.isDuplicateEmail(c.value)
      .map(response => response ? { duplicateEmail: true } : null);
  }
}

form.component.ts

this.formBuilder.group({
  name: ['', [ Validators.required ]],
  email: ['', [ Validators.required ], [ duplicateEmail ]]
});

恭喜，您现在已经实现了一个异步验证器！