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

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(email: string) {
    let body = 'email=' + email;
    return this.http.get(this.urls.USER_ACCOUNT.EMAIL_AVAILABLE + body);
  }

Answer 1

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

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

由 checkAvailability 函数返回的 Observable 确实完成，因此您的第二个验证器函数可以工作。