從未訂閱異步驗證器 (AsyncValidatorFn)

Question

我寫了一個自定義表單驗證器，但在errors它只有"_isScalar": false, "source": { "_isScalar": false, "source": { "_isScalar": false, "source": {"_isScalar": false}, "operator": {}}, "operator": {"total": 1}並且表單永遠無效。

這是我的驗證器：

export function asyncEmailValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    return of(control.value).pipe(
      map(res => {
        return res && res.indexOf('example.de') < -1 ? { eMailUnavailable: true } : null;
      }),
      take(1), finalize(() => {})
    );
  };
}

這就是我使用它的方式：

emailFormControl = new FormControl('', [
  Validators.required,
  Validators.email,
  asyncEmailValidator()
]);

通過調試，我發現從未到達我檢查 example.de 的 map 塊，我不明白為什么。 在顯示內部返回之前使用 function 本身和 output。

我在網上的多個示例中看到了這種結構，但它似乎對我不起作用。

我正在使用@angular/forms 10.0.14

Answer 1

異步驗證器應指定為第三個參數，如下所示：

 new FormControl('', [Validators.required, Validators.email], [asyncEmailValidator()]);