validation - 如何在 Angular4 中实现自定义异步验证器

Question

我在我的项目中应用了 Angular 4，但我在使用 HTTP 请求进行自定义验证时遇到了问题。

我也试过这个:How to implement Custom Async Validator in Angular2 .

但它在我的项目中不起作用。

这是我到目前为止所做的:

验证出价:

    userName: ['', [Validators.required, Validators.minLength(3), this.validateUserName.bind(this)]]

值变化事件:

    let userNameControl = this.individualForm.get('userName');
userNameControl.valueChanges.subscribe(value => {
    this.setErrorMessagesForUserNameControl(userNameControl)
  }
);

验证函数:

validateUserName(control: FormControl): Promise<any> {
let promise = new Promise<any>(
  (resolve, reject) => {
    if (this.oldUserNameForCheck != undefined) {
      this._individualUpdateService.isUserNameExisting(this.oldUserNameForCheck, control.value).subscribe(
        (res) => {
          if (res.isUserNameExisting) {
            console.log("existing");
            resolve({'existing': true});
          } else {
            console.log("NOT existing");
            resolve(null);
          }
        },
        (error) => {
          console.log(error);
        }
      );
    } else {
      resolve(null);
    }
  }
);
return promise;
}

Error Messages

我只是尝试通过将用户名发送到后端来验证用户名。

Here's the logs

如您所见，有一条关于“required”、“minlength”的消息。那些工作正常。但是自定义验证的消息不是很清楚。

Answer 1

异步验证器应该在下一个参数中

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.validateUserName.bind(this) ] 
]

另外，最好有一个工厂方法，该方法具有创建验证器所需的依赖项，而不是使用“bind(this)”

userNameValidator(originalUsername, individualUpdateService) {
    return (control: FormControl): Promise<any> => {
        return new Promise<any>((resolve, reject) => {
            if (originalUsername != undefined) {
                individualUpdateService.isUserNameExisting(originalUsername, control.value).subscribe(
                    (res) => {
                        if (res.isUserNameExisting) {
                            console.log("existing");
                            resolve({ 'existing': true });
                        } else {
                            console.log("NOT existing");
                            resolve(null);
                        }
                    },
                    (error) => {
                        console.log(error);
                    }
                );
            } else {
                resolve(null);
            }
        })
    }
}

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.userNameValidator(this.oldUserNameForCheck, this._individualUpdateService) ] 
]