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

正如您所看到的，有一条“必需”，“minlength”的消息，这些工作正常。但是自定义验证的消息并不十分清楚。我非常感谢你的帮助，感谢先进：）

Answer 1

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

中

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

最好还有一个具有所需依赖关系的工厂方法来创建验证器，而不是使用＆＃39; bind（this）＆＃39;

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) ] 
]

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

1 个答案: