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

В моем текущем приложении я пытаюсь создать форму, которая позволяет пользователям изменять свой адрес электронной почты или имя пользователя. У меня есть валидатор в полях формы, поэтому пользователи не могут иметь то же имя пользователя или пароль, что и другие пользователи. Я предварительно заполняю поле текущим именем пользователя и адресом электронной почты, однако, если я щелкну в этом поле, удалю один символ, а затем повторно применю его, я вызову текст предупреждения. Как я могу сделать так, чтобы валидатор не выдавал ошибку, если текущий пользователь вводит свое собственное имя пользователя?

import { Injectable } from '@angular/core';
import { FormControl, AbstractControl } from '@angular/forms';
import { UserinfoService } from 'src/services&Validtors/userinfo.service';
import { map } from 'rxjs/operators';
import { HttpClient, HttpParams } from '@angular/common/http';


@Injectable()
export class EmailValidator {
    constructor(private http:HttpClient) { }


    validateEmailNotTaken(control: AbstractControl) {
        return this.checkEmailNotTaken(control.value).pipe(
          map(res => {
            return res ? null : { emailTaken: true };
          })
        );
      }
    
      
      checkEmailNotTaken(email: string) {
        return this.http.get("http://127.0.0.1:8000/accounts/UserDataEmail/").pipe(
          map((emailList: Array<any>) =>
            emailList.filter(user => user.email === email)
          ),
          map(email => !email.length)
        );
      }




}

angular angular9 angular-validation angular-validator
person Community    schedule 26.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно реализовать AsyncValidator:

import {AbstractControl, AsyncValidator, ValidationErrors} from "@angular/forms";
import {Injectable} from "@angular/core";
import {Observable, of} from "rxjs";
import {catchError, map} from "rxjs/operators";

@Injectable({ providedIn: 'root' })
export class EmailValidator implements AsyncValidator {

  constructor(private emailService: YourEmailService) {}

  validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return this.emailService.isEmailTaken(control.value).pipe(
      map(isTaken => (isTaken ? { emailTaken: true } : null)),
      catchError(() => of(null))
    );
  }
}

Я настоятельно рекомендую вам создать checkEmailTaken в сервисе, как показано выше, который возвращает Observable<boolean>

Для получения дополнительной информации см. Реализация пользовательского асинхронного валидатора в документации Angular. .

person Santi Barbat    schedule 26.06.2020