Angular 6 - 已接收电子邮件的自定义验证器始终 returns true

Question

我按照这个 Angular 自定义验证器教程来检查电子邮件是否已被接收： https://alligator.io/angular/async-validators/

我的问题是验证器始终 returns 为真，即使尚未接收电子邮件（数据库中不存在）也是如此。任何人都可以检查我在这里做错了什么吗？

本教程使用 JSON 文件和电子邮件进行检查。我使用连接到 MySQL 数据库的真实后端（spring 框架）。当 http 请求来自数据库的 returns 个对象时，一切都在那里工作。

这是我的自定义验证器：

export class ValidateEmail {
  static createValidator(registerService: RegisterService) {
    return (control: AbstractControl) => {
      return registerService.findByEmail(control.value).pipe(map(res => {
        return res ? { emailTaken: true } : null;

        // I also tried the below if/else statement, but it changes nothing
        // if(res){
        //   return ({emailTaken: true});
        // } else {
        //   return (null);
        // }

      }));
    }
  }
}

RegisterService的方法（我觉得这里可能出了什么问题？）：

  findByEmail(email: string): Observable<User[]> {
    return this.http.get<User[]>('http://localhost:8080/user').pipe(
    map(users => users.filter(user => user.email === email)),
    catchError(this.errorHandler));
  }

向验证器注册组件：

ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.required],
    email: ['', [Validators.required, Validators.email], ValidateEmail.createValidator(this.registerService) ],
    username: ['', Validators.required],
    password: ['', [Validators.required, Validators.minLength(5)]]
  });
}

以及带有电子邮件输入字段的表单模板：

<input formControlName="email" type="text" class="form-control" aria-describedby="emailHelp" placeholder="Enter email" name="email"
       [ngClass]="{ 'is-invalid': submitted && f.email.errors }">
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
  <div *ngIf="f.email.errors.required">Email is required</div>
  <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
  <!-- Below error always shows up, even when email has not been taken -->
  <div *ngIf="f.email.errors.emailTaken">An account with this email already exists</div>
</div>

Answer 1

return res ? { emailTaken: true } : null;

因此如果 res 为真，则验证器 returns 出错。 res 是什么？这是

users.filter(user => user.email === email)

所以它是一个数组，可以为空也可以不为空。一个数组，无论是否为空，总是真实的。所以你的验证器总是 returns 一个错误。您需要测试数组是否为空。如果它是真实的就不会。

Angular 6 - 已接收电子邮件的自定义验证器始终 returns true

Angular 6 - Custom validator for taken emails always returns true

validation

formbuilder

typescript

angular

angular-reactive-forms