为什么我的 Angular 应用程序中的异步自定义验证器适用于键入的输入但不适用于粘贴的输入？

Question

我创建了一个自定义验证器，用于检查 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>

有人可以建议吗？我试图让它第一次也验证剪贴板事件（复制和粘贴）。

Answer 1

尝试这个 ：

onPasteEmail(): void {
  addForm.updateValueAndValidity();
}

<input (paste)="onPasteEmail()">

当您第一次复制和粘贴电子邮件时，将触发 paste 事件，然后响应式表单中的 updateValueAndValidity() 函数将触发您的验证