验证器函数未在表单控件上设置错误对象的问题

Question

我对以下验证器函数有疑问：

export function validateEmailKnownFactory(userAccountService: UserAccountService): {[key: string]: any} {
  return (control: AbstractControl) => {
    return control
      .valueChanges
      .debounceTime(1000)
      .switchMap(value => userAccountService.checkAvailability(value))
      .map(res => {
        if (res.json() === false) {
          return null;
        }
        //Control flow does get through here
        return {emailKnownValidator: {unknown: true}};
      });
  };
}

它没有在表单控件上设置错误对象（即 {emailKnownValidator: {unknown: true}}），但控制流确实通过了正确的位置。

现在，如果我用以下函数替换上面的函数：

export function validateEmailKnownFactory(userAccountService: UserAccountService): {[key: string]: any} {
  return (control: AbstractControl) => {
    return userAccountService.checkAvailability(control.value)
      .map(res => {
        if (res.json() === false) {
          return null;
        }
        return {emailKnownValidator: {unknown: true}};
      });
  };
}

表单控件上的错误对象设置正常，应用程序按预期运行。

注意区别：我从 control.valueChanges 得到 Observable 并在其上调用 debounceTime 而另一个函数只是直接调用 checkAvailability。

为了完整起见，这里是 checkAvailability 方法：

  checkAvailability(email: string) {
    let body = 'email=' + email;
    return this.http.get(this.urls.USER_ACCOUNT.EMAIL_AVAILABLE + body);
  }

Answer 1

Angular 2 中的异步验证器函数可以 return Promise 或 Observable。如果 Observable 是 returned，它必须完成 - 如 Angular converts the Observable to a Promise。也就是说，使用 Observable 以便验证可以是异步的——而不是验证器可以提供结果流。

在您的第一个验证器中，由 valueChanges 组成的 Observable 未完成 - 因为 valueChanges 不断输出更改。这意味着 Promise 没有解析并且没有可应用于控件的验证结果。（请注意，Angular 将为控件值的每次更改调用您的验证函数，并且每次调用都会看到一个 Observable 组合和订阅，因此 checkAvailability 将被调用每个更改。debounceTime 运算符不会影响您似乎想要的行为。）

由 checkAvailability 函数编辑的 Observable return 确实完成了，因此您的第二个验证器函数起作用了。

验证器函数未在表单控件上设置错误对象的问题

Issue with validator function not setting error object on form control

rxjs

angular2-forms

rxjs5

angular