Angular 异步验证器错误未显示

Question

我在尝试实施异步验证器时遇到问题。这是我的尝试：

export class EmailValidator {
    static createValidator(): AsyncValidatorFn {
        return (control: AbstractControl): Observable<ValidationErrors | null> => {
            return of({}).pipe(
                delay(1000),
                tap(() => {
                    const isMatch = /[A-Za-z0-9]{6,}@gmail.com/.test(control.value);
                    return isMatch ? null : { invalidEmail: true }
                })
            )
        };
    }
}

这是表单的基本创建：

this.loginForm = this.fb.group({
      email: [
        '',
        [
          Validators.required,
        ],
        EmailValidator.createValidator()
      ],
      password: [
        '',
        [
          Validators.required,
          Validators.minLength(8)
        ]
      ]
    });

这是我的 html:

<div class="container">
    <ul>
        <li class="active"><a routerLink="/login">Login</a></li>
        <li><a routerLink="/auth/register">Register</a></li>
    </ul>
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <input formControlName="email" type="email" placeholder="email">
        <div *ngIf="(loginForm.get('email')?.touched || loginForm.get('email')?.dirty) && loginForm.get('email')?.errors?.required">
            Email is required!
        </div>
        <div *ngIf="loginForm.get('email')?.errors?.invalidEmail">
            Email is invalid!
        </div>
        <input formControlName="password" type="password" placeholder="password">
        <input type="submit" value="Login">
    </form>
</div>

当我尝试在验证器内部进行调试时 returns 如果匹配则返回 null，如果不匹配则返回错误对象。由于某种原因，错误 div 未呈现。

Answer 1

对于 rxjs 运算符，您应该使用 map 而不是 tap。

import { ..., map } from 'rxjs/operators';

export class EmailValidator {
  static createValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      return of({}).pipe(
        delay(1000),
        map(() => {
          const isMatch = /[A-Za-z0-9]{6,}@gmail.com/.test(control.value);
          return isMatch ? null : { invalidEmail: true };
        })
      );
    };
  }
}

Sample solution on StackBlitz

您可以阅读。

Angular 异步验证器错误未显示

Angular async validator error is not showing

validation

angular