Angular响应式表单验证器失效问题排查

问题根源分析 #

你的自定义TextFieldComponent作为表单值访问器时，存在两个核心问题导致验证失效：

1. 输入值未正确同步到表单控件
   模板中(input)="onChange($event)"传递的是事件对象，而Angular表单的registerOnChange期望接收的是输入框的实际值。这导致表单控件无法获取最新输入内容，验证逻辑完全无法触发。

2. 密码字段的minLength错误提示未实现
   TextFieldComponent的错误提示区域仅处理了required和pattern错误，没有添加minlength对应的提示，所以即使密码长度不符合要求，也不会显示错误信息。

另外，你的邮箱正则表达式限制顶级域名长度为2-4位，无法兼容.dev、.app等新型顶级域名，这也可能导致部分有效邮箱被误判。

具体修复步骤 #

1. 修正值同步逻辑 #

修改TextFieldComponent模板中的input事件绑定，传递输入框的value而非事件对象：

<input 
  #input 
  [ngClass]="(controlDir && controlDir.control && controlDir.control.touched) 
          ? !controlDir.control.valid 
          ? 'is-invalid' 
          : 'is-valid' 
          : null" 
  [type]="type" 
  (input)="onChange(input.value)" <!-- 此处修改为传递输入值 -->
  (blur)="onTouched()" 
  id="{{label}}"
  class="form-control" 
  placeholder="{{label}}" 
  autocomplete="off" 
>

2. 添加minLength错误提示 #

在TextFieldComponent模板的invalid-feedback区域，新增minlength错误提示：

<div *ngIf="(
    controlDir && 
    controlDir.control &&
    !controlDir.control.valid &&
    controlDir.control.touched
    )" class="invalid-feedback">

  <!-- Required control check -->
  <span *ngIf="controlDir.control.errors?.['required']">{{label}} is required</span>

  <!-- Pattern control check -->
  <div *ngIf="controlDir.control.errors?.['pattern']">Invalid Email Format</div>

  <!-- 新增minLength错误提示 -->
  <div *ngIf="controlDir.control.errors?.['minlength']">
    {{label}} must be at least {{controlDir.control.errors?.['minlength'].requiredLength}} characters
  </div>
</div>

3. 优化邮箱正则表达式（可选） #

将邮箱验证的正则调整为兼容更长顶级域名的版本：

// LoginComponent中createLoginForm方法
email: new FormControl(null, [
  Validators.required,
  Validators.pattern(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)
]),

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