在 Angular 2 中，如何在使用模板驱动表单时设置异步验证器？答案

【问题标题】：In Angular 2, how to setup an asynchronous validator when using template-driven forms?在 Angular 2 中，如何在使用模板驱动表单时设置异步验证器？
【发布时间】：2017-08-19 08:53:55
【问题描述】：

我为我的异步验证器定义了一个指令：

@Directive({
  selector: '[validatorUsername]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: ValidatorUsernameDirective, multi: true }]
})
export class ValidatorUsernameDirective implements Validator {
  validate(c: AbstractControl) {
    let username = c.value;

    return new Promise(resolve => {
      setTimeout(() => {
        if( username === "nemo" ) {
          resolve({
            'taken': true
          })
        } else {
          resolve(null);
        }
      }, 1000);
    });
  }
}

在模板中，我应用如下：

<input type="text" [(ngModel)]="username" name="username" required validatorUsername>

然后我应用了来自代码（而不是模板）的验证消息，如 Angular 的 Cookbook 章节 Form Validation 中所述：

export class App implements OnInit {
  @ViewChild('myForm') myForm: NgForm;

  name: string;
  username: string;

  ngOnInit() {
    this.myForm.valueChanges.subscribe(_ => this.onValueChanged());
  }

  onValueChanged() {
    // fill 'formErrors' object
  }

  formErrors = {
    'name': '',
    'username': ''
  };
}

问题是onValueChanged()在验证器的promise被解决时没有被调用，因此username的验证消息没有出现。如果您尝试编辑 name 字段，它会出现。我应该怎么做才能触发 UI 上的更新？

Here 是我的代码的插件。

参考资料：

【问题讨论】：

标签： validation angular

【解决方案1】：

您可以订阅调用异步验证器后触发的statusChanges 事件

this.myForm.statusChanges.subscribe(_=> this.onValueChanged());

Modified Plunker

【讨论】：