如何将 composeAsync 添加到 angular 5 个验证器

Question

我正在使用响应式表单方法开发 Angular 5 表单模块。在我的表单控件之一的那个表单中，我需要完成一些后端验证，有人可以帮助实现 composeAsync 函数处理后端验证吗？

Answer 1

这是我的实现方式（用于用户名检查）

首先我添加了remort验证的报表验证功能

this.regForm = this.fb.group({
      userName: ['', Validators.required, 
                 this.validateUserIDNotTaken.bind(this) ],
      password: [ '', [Validators.required]]
});

然后

validateUserIDNotTaken(control: AbstractControl) {
    return this.userService.validateUserIDNotTaken(control.value).map(res => {
      return res ? null : { unTaken: true };
    });
}

在用户服务中

export class validateUserIDNotTaken{
  static createValidator(userService: UserService) {
    return (control: AbstractControl) => {
      return userService.validateUserIDNotTaken(control.value).map(res => {
        return res ? null : { unTaken: true };
      });
    };
  }
}

并将其添加到模板中

<div *ngIf="regForm.get('userName').errors && regForm .get('userName').errors.unTaken">
   This userName is already taken!
</div>

如何将 composeAsync 添加到 angular 5 个验证器

How to add composeAsync to angular 5 validators

forms

angular-validation

angular