Angular2异步验证器

时间:2017-11-04 05:08:55

标签: angular2-forms

抱歉我的英语不好。

我正在尝试在我的角度应用程序中使用自定义异步验证,如此

 asyncValidator(control:FormControl):Promise<any>{
    const promise = new Promise<any>(
      (resolve, reject) =>{
        setTimeout(() => {
          console.log("it works");
          resolve(null);
        },5000);
      }
    );
    return promise;
  }

我宣布我的反应形式是这样的:

this.customForm = this.formbuilder.group({
      'userData': this.formbuilder.group({
        'name': ['',this.asyncValidator],
        'email': [''],
      }),
      'pass': [''],
      'gender': ['male'],
      'hobbies': this.formbuilder.array([
        ['Reading']
      ])
    })

即使asyncValidator始终解析(null),名称输入仍然具有ng-invalid类。

enter image description here

1 个答案:

答案 0 :(得分:1)

您错误地放置了异步验证器。

应该是:

'name': ['', null, this.asyncValidator],
         (1)  (2)          (3)      

其中:

(1) - 控制值

(2) - 同步验证器

(3) - 异步验证器

<强> Stackblitz example