Angular中如何让ControlValueAccessor内部控件保持正确验证状态

核心问题原因 #

matInput默认仅读取自身绑定的FormControl实例状态判断是否触发错误样式、展示mat-error内容，之前尝试的两种方案本质都是通过双Control实例/实例复用的方式同步状态，必然会导致校验逻辑重复执行，同时存在状态不一致的设计风险。

最优实现方案 #

采用Angular Material官方提供的ErrorStateMatcher扩展点实现状态同步，全程仅维护外层传入的单个FormControl实例，从根源规避上述问题：

1. 自定义错误状态匹配器 #

实现ErrorStateMatcher接口，直接读取外层注入的NgControl状态判断是否展示错误：

import { ErrorStateMatcher } from '@angular/material/core';
import { NgControl } from '@angular/forms';

export class CustomInputErrorMatcher implements ErrorStateMatcher {
  constructor(private readonly control: NgControl) {}

  isErrorState(): boolean {
    const ctrl = this.control.control;
    return !!ctrl?.invalid && (ctrl.dirty || ctrl.touched);
  }
}

2. 组件逻辑调整 #

移除内部独立维护的formControl实例，在构造函数中初始化错误匹配器，仅实现ControlValueAccessor接口完成值和事件的对接即可：

import { Component, Input } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
import { CustomInputErrorMatcher } from './custom-input-error.matcher';

@Component({
  selector: 'our-input',
  templateUrl: './our-input.component.html'
})
export class OurInputComponent implements ControlValueAccessor {
  @Input() label: string;
  @Input() maxLength: number;
  @Input() required = false;

  value: string = '';
  errorStateMatcher: CustomInputErrorMatcher;
  private onChange: (val: string) => void;
  private onTouched: () => void;

  constructor(@Self() private ngControl: NgControl) {
    // 注册值访问器，避免在providers中声明导致的循环依赖
    this.ngControl.valueAccessor = this;
    this.errorStateMatcher = new CustomInputErrorMatcher(this.ngControl);
  }

  writeValue(value: string): void {
    this.value = value ?? '';
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  onInputChange(val: string): void {
    this.value = val;
    this.onChange?.(val);
  }

  onInputBlur(): void {
    this.onTouched?.();
  }
}

3. 模板调整 #

移除内部input的[formControl]绑定，改为直接绑定value属性，传入自定义的错误状态匹配器：

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>{{label}}</mat-label>
  <input
    matInput
    type="text"
    [value]="value"
    [maxLength]="maxLength"
    [required]="required"
    [errorStateMatcher]="errorStateMatcher"
    (input)="onInputChange($any($event.target).value)"
    (blur)="onInputBlur()"
  >
  <mat-error *ngFor="let error of ngControl.errors | keyvalue">
    <ng-container [ngSwitch]="error.key">
      <ng-container *ngSwitchCase="'required'">该字段为必填项</ng-container>
      <ng-container *ngSwitchCase="'maxlength'">输入长度不能超过{{maxLength}}个字符</ng-container>
      <!-- 其余错误提示按相同规则扩展 -->
    </ng-container>
  </mat-error>
</mat-form-field>

方案优势 #

• 无重复校验问题：所有校验逻辑仅在外层FormControl上执行一次，内部输入框仅同步状态，不重复运行校验规则
• 无设计风险：全程仅存在一个FormControl实例，完全规避多实例绑定带来的状态不一致问题
• 自动触发变更检测：外层表单控件的状态（touched/dirty/valid等）变更时，Angular表单原生的状态通知机制会自动触发组件重绘，无需手动实现属性监听
• 符合官方规范：ErrorStateMatcher是Angular Material官方开放的自定义错误状态判断扩展点，是Angular生态内组件库开发的通用最佳实践

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