Firebase- fetchProvidersForEmail - 异步错误验证 - 电子邮件表单验证

Question

在尝试将下面的方法放在表单组的同步块中时，我有点困难。我知道fetchProvidersForEmail是异步的，但我无法将该方法转换为同步方法。

当我的自定义验证方法放在同步块上时，会返回一个非常奇怪的错误对象。

我无法在表单组的同步块中使用此方法吗？有没有更好的方法可以做到这一点。只是在注册过程中检查电子邮件是否存在。

  

“@ angular”：“5.0.1”，“angularfire2”：“^ 5.0.0-rc.5-next”，   “firebase”：“^ 4.12.0”

//synchronous - returns strange error -- picture below
form = this.fb.group({
  email: [this.user.email, [
    Validators.email,
    Validators.required,
    CustomValidators.userEmailExists(this.afa)
  ]],
});

//asynchronous - returns fine
form = this.fb.group({
  email: [this.user.email, [
      Validators.email,
      Validators.required
    ],
    [
      CustomValidators.userEmailExists(this.afa)
    ]
  ],
});

//CustomValidatorService

static userEmailExists(afa: AngularFireAuth) {
  return (control: AbstractControl) => {
    const email = control.value.toLowerCase();
    if (this.EMAIL_REGEXP.test(email)) {
      return firebase.auth()
        .fetchProvidersForEmail(email)
        .then(arr => arr.length ? {
          userEmailExists: true
        } : null);
    }
    return Observable.of(null);
  };
}

Answer 1

因为您的异步验证器将始终返回null，因为Observable.of（null）同步返回，并且您的promise永远不会返回更改。

此外，您似乎试图在静态方法中访问this，这绝对不会起作用。我在说this.EMAIL_REGEXP。您应该在方法本身中定义正则表达式。

我不会在一个验证器中混合使用observable和promises。因此，假设fetchProvidersForEmail（）返回一个promise，让我们坚持承诺：

static userEmailExists(afa: AngularFireAuth) {
  return (control: AbstractControl) => {
   const EMAIL_REGEXP = /my-awesome-regexp/;
   const email = control.value.toLowerCase();
    return EMAIL_REGEXP.test(email) ?
      Promise.resolve(null) :
      firebase.auth()
        .fetchProvidersForEmail(email)
        .then(arr => arr.length ? {
          userEmailExists: true
      } : null);
  };
}