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

Question

我正在尝试更新 Angular2 表单验证示例以处理异步验证响应。这样我就可以点击 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 数组中。 AsyncValidators 被添加到 SyncValidators 之后的单独数组中：

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