Angular 8响应式表单邮箱异步验证器未触发问题求助

问题描述 #

使用Angular 8响应式表单为邮箱字段添加异步验证器检查唯一性时，该验证器无法正常触发或工作。同一表单内的code字段已实现相同逻辑的异步验证且正常运行，但邮箱字段仅在内置邮箱格式验证出错时，才会同时显示格式错误和唯一性错误。邮箱字段配置了required、email内置验证器，以及调用服务校验唯一性的异步验证器，怀疑是异步验证器返回的错误对象{'email': true}与内置Validator.email的返回存在冲突。

相关代码 #

模板代码 #

<mat-form-field 
   style="height:40px; margin-bottom: 20px; margin-top: 20px; margin-left: 10px; width:230px" 
   floatPlaceholder="always" 
   hintLabel="User's Initials, max 3 characters">
        <input tabindex="3" matInput class="mfbds-inlineselect"
           required 
           type="text"
           name="code" 
           placeholder='Code (required)'
           formControlName="code"
           [ngClass]="{'is-invalid':(bioUserForm.get('code').touched && !bioUserForm.get('code').valid) }">
           <mat-error *ngIf="bioUserForm.get('code').touched && !bioUserForm.get('code').valid">
                  <span *ngIf="bioUserForm.get('code').errors?.required">
                        Please enter the code.
                  </span>
                  <span *ngIf="bioUserForm.get('code').errors?.minlength">
                        The code must be at least 2 characters.
                  </span>
                  <span *ngIf="bioUserForm.get('code').errors?.maxlength">
                        The code must be less than 3 characters.
                  </span>
                  <span *ngIf="bioUserForm.get('code').errors?.code">
                        The code you entered is already in use. 
                        Please append a 1, 2, or 3... to your code and try again.
                  </span>
               </mat-error>
           </mat-form-field>

                <mat-form-field style="height:40px; margin-bottom: 20px; margin-top: 20px; margin-left: 10px; width:230px" 
                floatPlaceholder="always"
                hintLabel="Standard email format">
                    <input tabindex="4" matInput class="mfbds-inlineselect"
                    required
                    type="text"
                    name="email"
                    displayField='email' 
                    displayCode='email' 
                    idField="id" 
                    placeholder='Email (required)'
                    formControlName="email"
                    [ngClass]="{'is-invalid':(bioUserForm.get('email').touched && !bioUserForm.get('email').valid) }">
                    <mat-error *ngIf="bioUserForm.get('email').touched && !bioUserForm.get('email').valid">
                        <span *ngIf="bioUserForm.get('email').errors?.required">
                            The email cannot be null or empty. Please enter a valid email.
                        </span>
                        <span *ngIf="bioUserForm.get('email').errors?.email">
                            The email you entered is not a valid email format.
                        </span>
                        <span *ngIf="bioUserForm.get('email').errors?.email">
                            The email you entered is already in use.
                        </span>
                    </mat-error>
                </mat-form-field>

异步验证器组件代码 #

uniqueCodeAsyncValidator(tableName: string): AsyncValidatorFn {
    return (control: AbstractControl): Promise<ValidationErrors | null> => {
        return this.lookupsService.getValues(tableName).then(
            values => {
                if(control.value !== null && (values.some(el => el.code.toLowerCase() === control.value.toLowerCase()))){
                    return { 'code' : true };
                }
                return null;
            },
            error => <any>error
        );
    }
}


uniqueEmailAsyncValidator(tableName: string): AsyncValidatorFn {
    return (control: AbstractControl): Promise<ValidationErrors | null> => {
        return this.lookupsService.getValues(tableName).then(
            values => {
                if(control.value !== null && (values.some(el => {
                    if(el.email === null){
                        return null;
                    } else if (el.email.toLowerCase().trim() === control.value.toLowerCase().trim()){
                        return { 'email' : true };
                    }
                })))   
                return null;       
            },
            error => <any>error
        );
    }
}

表单初始化及保存函数代码 #

ngOnInit(): void { 
    this.bioUserForm = this.fb.group({
        firstName:['',[Validators.required, Validators.minLength(3)]],
        lastName: ['',[Validators.required, Validators.maxLength(50)]],
        code: ['',[Validators.required, Validators.minLength(2), Validators.maxLength(3)], this.uniqueCodeAsyncValidator("person")], //uniqueValidator checks a table to see if value not already in use
        // email: ['',[Validators.required, Validators.email], this.uniqueEmailAsyncValidator("person")], //uniqueValidator checks a table to see if value not already in use
        email: ['',[Validators.required, Validators.email], this.uniqueEmailAsyncValidator("person")], //uniqueValidator checks a table to see if value not already in use
        // email: ['',{Validators:[Validators.required, Validators.email], asyncValidators: this.uniqueEmailAsyncValidator("person"), updateOn: 'blur'}], //uniqueValidator checks a table to see if value not already in use
        agency:[''],
        startDate:['']
    });

save(){
    if(this.bioUserForm.valid){
        return this.lookupsService.postValue('person',this.bioUserForm.value).then(
            person => {
                let obj = {}
                obj['code']= "ORG"
                obj['name']= `ORG ${this.bioUserForm.get('firstName').value} ${this.bioUserForm.get('lastName').value}`
                obj['personId'] = person.id
                obj['agencyId'] = this.bioUserForm.get('agency').value
                obj['startDatetime'] = this.bioUserForm.get('startDate').value
                return this.lookupsService.postValue('personAgency',obj).then(
                    personAgency => {
                        this.bioUserForm.reset()
                        this.modalService.openConfirmModal(`${person.firstName} ${person.lastName} was added to the person table, ID:${person.id}, and person_agency table, ID:${personAgency.id}`,'').subscribe(res=>{})
                            return;
                    }   
                )   
            }
        )     
    }
    this.bioUserForm.reset()   
}

问题分析与修复方案 #

核心问题 #

1. 异步验证器逻辑错误：uniqueEmailAsyncValidator中values.some()的回调返回对象而非布尔值，导致some()无法正确判断是否存在重复邮箱，异步验证器永远返回null。
2. 错误Key冲突：异步验证器返回的错误Keyemail与内置Validators.email的错误Key完全一致，模板无法区分格式错误和唯一性错误；同时Angular默认仅在同步验证通过后才触发异步验证，这就解释了为何只有同步验证出错时才会显示异常。

修复步骤 #

1. 修正异步验证器逻辑与错误Key

修改uniqueEmailAsyncValidator，改用唯一错误KeyemailExists，并修正some()的判断逻辑：

uniqueEmailAsyncValidator(tableName: string): AsyncValidatorFn {
    return (control: AbstractControl): Promise<ValidationErrors | null> => {
        // 同步验证不通过时直接返回，避免无效请求
        if (!control.valid) {
            return Promise.resolve(null);
        }
        return this.lookupsService.getValues(tableName).then(
            values => {
                const emailValue = control.value?.toLowerCase().trim();
                if (emailValue && values.some(el => {
                    // 处理null情况，返回布尔值判断是否匹配
                    if (!el.email) return false;
                    return el.email.toLowerCase().trim() === emailValue;
                })) {
                    // 使用唯一错误Key区分唯一性错误
                    return { 'emailExists': true };
                }
                return null;
            },
            error => {
                // 请求失败时返回专属错误Key
                return { 'emailCheckFailed': true };
            }
        );
    }
}

2. 更新模板错误提示判断

修改邮箱字段的mat-error部分，区分不同类型的错误：

<mat-error *ngIf="bioUserForm.get('email').touched && !bioUserForm.get('email').valid">
    <span *ngIf="bioUserForm.get('email').errors?.required">
        The email cannot be null or empty. Please enter a valid email.
    </span>
    <span *ngIf="bioUserForm.get('email').errors?.email">
        The email you entered is not a valid email format.
    </span>
    <span *ngIf="bioUserForm.get('email').errors?.emailExists">
        The email you entered is already in use.
    </span>
    <span *ngIf="bioUserForm.get('email').errors?.emailCheckFailed">
        Failed to check email availability. Please try again later.
    </span>
</mat-error>

3. 优化表单配置（可选）

可以将邮箱字段的验证触发时机改为blur，减少异步请求频率：

email: ['', {
    validators: [Validators.required, Validators.email],
    asyncValidators: this.uniqueEmailAsyncValidator("person"),
    updateOn: 'blur'
}],

内容的提问来源于stack exchange，提问作者M_66