validation - Angular2 自定义表单验证器在类中失去对 `this` 的访问权限

Question

我正在构建一个 Angular 2 应用程序 (2.0)，并且我有一个使用 ReactiveForms 模块的表单。因此，我在输入字段上使用验证器函数，包括自定义验证器。这很好用。

我的问题是我还尝试在表单字段上使用自定义 AsyncValidator。看起来很直接，但我永远无法从 AsyncValidator 方法中引用类中的属性。

表单本身和输入字段的 FormGroup 和 FormControl 属性在组件的类中如下所示:

form: FormGroup;
userName = new FormControl("", [Validators.required], [this.userNameAsyncValidator]);

ngOnInit() 函数中还有一个 FormBuilder，它将表单附加到 form 属性。

constructor(private fb: FormBuilder, // this.fb comes from here
          private css: ClientSecurityService) { // this.css comes from here
}

ngOnInit() {
  this.form = this.fb.group({
      "userName": this.userName
    }
  );
}

我的问题是，在 AsyncValidator 中，我无法引用我在组件类中定义的任何服务 - 包括 this.css。这是验证器:

userNameAsyncValidator(control: FormControl): {[key: string]: any} {
  return new Promise(resolve => {
    this.css.getUrl()
      .subscribe(
        data => {
          console.log('Returned http data:', data);
          resolve(null);
        },
        err => {
          // Log errors if any
          console.log(err);
        });
  });
}

无论我做什么，userNameAsyncValidator() 调用中的 this.css 都是未定义的。

(我意识到我的验证器实际上并没有做任何事情——我只是想调用我的 ClientSecurity 服务，这样我最终可以调用一个远程 HTTP web 服务来获得关于是否正在输入用户名的响应有效且尚未使用。)

Answer 1

您的验证器未作为 this 与您的组件一起调用。请注意，您正在传递对 this.userNameAsyncValidator 的松散引用 您可以绑定(bind)验证器而不必担心 this 冲突，因为 Angular 验证不依赖于 this

userName = new FormControl("", [
    Validators.required
], [
    this.userNameAsyncValidator.bind(this)
]);