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

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

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

为了完整性＆＃39;这里是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以便验证可以是异步的 - 而不是验证器可以提供结果流。

第一个验证程序中由Observable组成的valueChanges未完成 - 因为valueChanges不断提出更改。这意味着Promise无法解决，并且没有可应用于控件的验证结果。（请注意，Angular将为控件值中的每个更改调用您的验证函数，并且每个调用都会看到Observable编写并订阅，因此将为每个调用checkAvailability debounceTime运算符不会影响你想要的行为。）

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

验证函数问题没有在表单控件上设置错误对象

1 个答案: