为什么我在Angular应用程序中的Async自定义验证器对键入的输入有效，但对粘贴的输入却无效？

问题描述

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

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

解决方法

尝试：

textView.text = getString(R.string.app_settings) + " \u2794 " + getString(R.string.display)

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

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

,

改为使用ReactiveForms，没有理由使其变得比所需的更为复杂。 对“ onPaste”进行硬编码的修补程序是一种荒谬的依赖。