Question

我按照此Angular教程中的说明进行了自定义验证，以检查是否已接收电子邮件： https://alligator.io/angular/async-validators/

我的问题是，即使尚未收到电子邮件（数据库中不存在电子邮件），验证器也始终返回true。有人可以在这里检查我在做什么错吗？

本教程使用带有电子邮件的JSON文件进行检查。我使用了连接到MySQL数据库的真实后端（弹簧框架）。一切正常，因为http请求从数据库返回对象。

这是我的自定义验证器：

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

带有验证器的RegisterComponent：

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为真，验证器将返回错误。什么是res？是

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

所以它是一个数组，可以为空也可以不为空。数组（无论是否为空）始终是真实的。因此，您的验证器总是返回错误。您需要测试数组是否为空。如果是真的，那就不是。

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

1 个答案: