Angular表单密码验证问题：添加空格校验后长度校验失效

我之前也遇到过类似的情况，你的问题核心在于把针对单个控件的空格校验器放在了表单级别，而非密码控件自身的校验器集合中。当密码同时触发控件级错误（如长度不足）和表单级错误（含空格）时，Angular Material的错误状态判断逻辑会优先识别表单级错误，导致控件级的长度校验提示无法正常显示。

解决方案步骤 #

1. 将isWhiteSpace校验器移至密码控件的校验器数组

把原本放在表单级的空格校验器，移动到password控件的validators列表中，让它成为控件级校验器，这样密码控件会同时维护自身的所有校验错误（长度、空格、必填等）。

修改后的表单初始化代码：

const form = new FormGroup<UserRegister>({
  email: new FormControl<string>(email, [
    Validators.required,
    Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')
  ]),
  password: new FormControl<string>(password, [
    Validators.required,
    Validators.minLength(PASSWORD_MINLENGTH),
    Validators.maxLength(PASSWORD_MAXLENGTH),
    isWhiteSpace // 移到这里，作为密码控件的专属校验器
  ]),
  confirmPassword: new FormControl<string>(confirmPassword, [
    Validators.required
  ]),
}, {validators: [passwordMatchValidator]}); // 移除表单级的isWhiteSpace

2. 确保isWhiteSpace校验器适配控件级逻辑

你的isWhiteSpace校验器需要接收单个控件作为参数，而不是整个表单，调整后的校验器实现示例：

import { AbstractControl, ValidationErrors } from '@angular/forms';

export function isWhiteSpace(control: AbstractControl): ValidationErrors | null {
  // 判断输入值是否包含首尾或中间的空格
  const value = control.value?.trim();
  const hasWhitespace = !value || value.length !== control.value?.length;
  return hasWhitespace ? { isWhiteSpace: true } : null;
}

3. 优化模板中的错误判断（可选但更清晰）

模板中可以直接通过控件对象判断错误，比通过表单路径判断更直观：

<input matInput type="password" required formControlName="password" [errorStateMatcher]="errorStateMatcher" placeholder="{{ 'password' | translate }}">
<mat-error *ngIf="form.get('password')?.hasError('required')" [translate]="'validation.required'" [translateParams]="{ value: 'password' | translate }"></mat-error>
<mat-error *ngIf="form.get('password')?.hasError('isWhiteSpace')" [translate]="'validation.isWhiteSpace'" [translateParams]="{ value: 'password' | translate }"></mat-error>
<mat-error *ngIf="form.get('password')?.hasError('minlength')" [translate]="'validation.minLength'" [translateParams]="{ value: 'password' | translate, minLength: PASSWORD_MINLENGTH }"></mat-error>
<mat-error *ngIf="form.get('password')?.hasError('maxlength')" [translate]="'validation.maxLength'" [translateParams]="{ value: 'password' | translate, maxLength: PASSWORD_MAXLENGTH }"></mat-error>

4. 检查自定义ErrorStateMatcher逻辑

如果你使用了自定义的错误状态匹配器，确保它的逻辑允许控件同时显示多个错误。默认的ErrorStateMatcher逻辑已经支持这一点，示例如下（如果你的自定义匹配器偏离了这个逻辑，需要调整）：

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

export class DefaultErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

原理说明 #

当校验器属于控件级时，所有校验错误都会被挂载到对应的FormControl对象上，Angular Material的mat-error会根据每个错误的存在情况分别显示，不会因为某个错误触发而屏蔽其他错误。而表单级校验器的错误是挂载到整个FormGroup上的，会干扰控件级错误的状态判断，导致无法同时显示多个错误提示。

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