Angular2自定义表单验证器无法访问类中的"this" [英] Angular2 Custom Form Validators losing access to `this` in class

问题描述

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

I'm building an Angular 2 application (2.0) and I've got a form that makes use of the ReactiveForms module. As such, I'm using validator functions on the input fields, including custom validators. This works fine.

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

My issue is that I am also trying to use a custom AsyncValidator on a form field. It seems straight forward enough, but I can never reference properties inside the class from within the AsyncValidator method.

表单本身和输入字段的FormGroup和FormControl属性在组件的类中看起来像这样:

The FormGroup and the FormControl properties for the form itself and the input field look like this in the component's class:

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

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

There's also a FormBuilder in the ngOnInit() function that attaches the form to the form property.

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.这是验证器:

My issue is that in the AsyncValidator, I am unable to reference any of the services I've defined in the component's class - including this.css. Here's the validator:

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都是不确定的.

No matter what I do, this.css in the userNameAsyncValidator() call is undefined.

(我意识到验证器实际上没有做任何事情-我只想能够调用ClientSecurity服务，以便最终可以调用远程HTTP Web服务以获取有关是否输入了userName的响应有效且尚未使用.)

(I realize that my validator doesn't actually do anything - I just want to be able to call my ClientSecurity service so that I can, eventually, call a remote HTTP webservice to get a response as to whether the userName being entered is valid and not already in use.)

推荐答案

您的验证程序未与您的组件作为this一起调用.请注意，您传递的是对this.userNameAsyncValidator的宽松引用，您可以绑定验证器而不必担心this冲突，因为角度验证不依赖this

Your validator is not being called with your component as this. Notice that you are passing a loose reference to this.userNameAsyncValidator You can bind your validator without worrying about this conflicts because angular validation doesn't rely on this

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

这篇关于Angular2自定义表单验证器无法访问类中的"this"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！