Angular 6 - Пользовательский валидатор для принятых писем всегда возвращает true - PullRequest
Новая
       23

Angular 6 - Пользовательский валидатор для принятых писем всегда возвращает true

0 голосов
/ 27 июня 2018

Я следовал этому уроку Angular для пользовательского валидатора, чтобы проверить, было ли уже взято письмо: https://alligator.io/angular/async-validators/

Моя проблема в том, что валидатор всегда возвращает true, даже если электронное письмо еще не было получено (отсутствует в базе данных). Кто-нибудь может проверить, что я здесь делаю не так?

В этом руководстве для проверки используется файл JSON с электронными письмами. Я использую реальный бэкэнд (Spring Framework), который подключен к базе данных 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>

1 Ответ

0 голосов
/ 27 июня 2018 
return res ? { emailTaken: true } : null;

Таким образом, валидатор возвращает ошибку, если res верен. Что такое res? Это 

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

Так что это массив, который может или не может быть пустым. Массив, пустой или нет, всегда верен. Таким образом, ваш валидатор всегда возвращает ошибку. Вам необходимо проверить, является ли массив пустым или нет. Нет, если это правда.

...