Angular 앱의 비동기 사용자 지정 유효성 검사기가 입력 된 입력에서는 작동하지만 붙여 넣은 입력에서는 작동하지 않는 이유는 무엇입니까?

이메일이 이미 MySQL 데이터베이스에 있는지 확인하는 사용자 지정 유효성 검사기를 만들었습니다. 사용자가 데이터베이스에 이미 존재하는 이메일을 입력하면 적절한 경고 메시지가 나타나고 관리자가 기존 사용자를 삽입 할 수 없게됩니다.

그러나 몇 번 테스트 한 후 데이터베이스에서 이메일 주소를 복사하여 양식 필드에 붙여 넣기 만하면이 유효성 검사가 쉽게 깨질 수있는 것처럼 보입니다. 처음으로 이메일에 붙여 넣을 때는 이메일의 유효성을 검사하지 않지만 삭제하고 두 번째로 붙여 넣으면 인식한다는 점에 유의해야합니다. 아래 첨부 된 사진에서 프로세스를 보여주었습니다.

내 코드도 참조하십시오.

내 맞춤 검사기 :

import { Directive } from '@angular/core';
import { AsyncValidator, AbstractControl, ValidationErrors, NG_ASYNC_VALIDATORS, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs';
import { PatientsService } from './patients.service';
import { map } from 'rxjs/operators';

export function uniqueUsernameValidator(patientService: PatientsService): AsyncValidatorFn {
    return (c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
        return patientService.checkUserEmail(c.value).pipe(
            map(users => {
                return users && users.length > 0 ? { 'uniqueUsername': true } : null;
            })
        );
    };
}




@Directive({
    selector: '[uniqueUsername]',
    providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueUsernameValidatorDirective, multi: true }]
})
export class UniqueUsernameValidatorDirective implements AsyncValidator {

    constructor(private patientService: PatientsService) { }

    validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
        return uniqueUsernameValidator(this.patientService)(c);
    }

}

내가 그것을 사용하고있는 구성 요소 :

email: [
        null,
        [Validators.required,Validators.maxLength(30),Validators.email],
        [this.usernameService.usernameValidator()]
      ]

내 HTML에서 참조

  <div class="form-group col-md-6">

    <label for="inputemail"id="label">Email</label>
    <input type="email" formControlName="email" name="email" class="form-control" id="inputEmail4"placeholder="Email">
    <div class="alert alert-danger" *ngIf="addForm.get('email').hasError('maxlength') && addForm.get('email').touched">
        Please enter maximum 30 characters.
       </div>
    <div class="alert alert-danger" *ngIf="addForm.get('email').hasError('required') && addForm.get('email').touched">
        Please enter an email address.
       </div>
       <div class="alert alert-danger"*ngIf="addForm.get('email').hasError('email') &&  addForm.get('email').touched">
        Please insert a valid email address.
      </div>

      <!--If same email exists...-->
      <div class="alert alert-danger"*ngIf=" addForm.controls['email']?.errors?.emailExists">
        Email already exists
      </div>
  </div>

누군가 조언 해 주시겠습니까? 처음으로 클립 보드 이벤트 (복사 및 붙여 넣기)의 유효성을 검사하려고합니다.