Angular2异步表单验证器（返回Promise）-Java 学习之路

我正在尝试更新Angular2 Forms Validation示例以处理异步验证响应 . 这样我就可以点击HTTP endpoints 来验证用户名 .

看看他们的代码，他们目前没有使用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}});
        });

  };
}

但是，我得到的结果不显示错误消息，它显示未定义 .

enter image description here

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

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 =预览

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

回复于 2024-05-04T04:35:03+08:00

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

1 回答

相关问题