Angular2异步表单验证器（返回Promise）

Question

我试图更新Angular2 Forms Validation示例来处理Async Validation响应。这样我就可以点击HTTP端点来验证用户名。

看看他们的代码，他们目前还没有使用Promise，而且工作得很好：

/ **英雄的名字不能与给定的正则表达式匹配* /

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    const name = control.value;
    const no = nameRe.test(name);
    return no ? {'forbiddenName': {name}} : null;
  };
}

我试图更新以返回Promise。类似的东西：

/** A hero's name can't match the given regular expression */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl) => {
    const name = control.value;


    return new Promise( resolve => {
               resolve({'forbiddenName': {name}});
        });

  };
}

然而，我得到的结果并没有显示错误信息，它显示未定义。

我的想法是它与处理显示错误的方式有关：

  onValueChanged(data?: any) {
    if (!this.heroForm) { return; }
    const form = this.heroForm;

    for (const field in this.formErrors) {
      // clear previous error message (if any)
      this.formErrors[field] = '';
      const control = form.get(field);

      if (control && control.dirty && !control.valid) {
        const messages = this.validationMessages[field];
        for (const key in control.errors) {
          this.formErrors[field] += messages[key] + ' ';
        }
      }
    }
  }

但是，我不确定更好的方法。

  

Angular2示例：   https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#live-example

     

链接到我的示例尝试返回Promise：   https://plnkr.co/edit/sDs9pNQ1Bs2knp6tasgI?p=preview

Answer 1

问题是您将AsyncValidator添加到SyncValidator阵列。在SyncValidators之后，AsyncValidators被添加到一个单独的数组中：

this.heroForm = this.fb.group({
  'name': [this.hero.name, [
      Validators.required,
      Validators.minLength(4),
      Validators.maxLength(24)
    ], 
    [forbiddenNameValidator(/bob/i)] // << separate array
  ],
  'alterEgo': [this.hero.alterEgo],
  'power':    [this.hero.power, Validators.required]
});