Angular 17中ControlValueAccessor自定义表单控件无效却未标红问题咨询

问题根源 #

Angular 17调整了表单控件错误状态的检测逻辑，自定义ControlValueAccessor组件需要更明确地关联父表单控件的状态，才能让错误样式（比如红色高亮）正常触发。

具体解决方案 #

1. 注入NgControl关联表单控件

在自定义组件的构造函数中注入NgControl，并将当前组件设为其值访问器，直接获取父表单的验证状态：

import { Component, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';

@Component({
  selector: 'app-custom-form-field',
  templateUrl: './customFormField.component.html',
  standalone: true,
  imports: [FormsModule]
})
export class CustomFormFieldComponent implements ControlValueAccessor {
  value: string = '';
  onChange = (value: string) => {};
  onTouched = () => {};

  constructor(@Self() public ngControl: NgControl) {
    this.ngControl.valueAccessor = this;
  }

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

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

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

  onInputChange(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value;
    this.value = inputValue;
    this.onChange(inputValue);
  }

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

2. 在模板中根据控件状态应用错误样式

通过ngControl的状态判断是否添加错误类：

<input
  type="text"
  [value]="value"
  (input)="onInputChange($event)"
  (blur)="onInputBlur()"
  [class.invalid]="ngControl.control.invalid && ngControl.control.touched"
/>

<style>
  .invalid {
    border-color: red;
    outline-color: red;
  }
</style>

如果使用Angular Material，可定义errorState getter让组件自动识别错误状态：

get errorState(): boolean {
  return this.ngControl.control.invalid && this.ngControl.control.touched;
}

对应的模板：

<mat-form-field [errorStateMatcher]="{ isErrorState: () => errorState }">
  <input matInput [value]="value" (input)="onInputChange($event)" (blur)="onInputBlur()">
  <mat-error *ngIf="ngControl.control.hasError('minlength')">
    输入长度不足，最少需要{{ ngControl.control.getError('minlength').requiredLength }}个字符
  </mat-error>
</mat-form-field>

3. 确保表单模块正确导入

独立组件需在imports数组中导入FormsModule和ReactiveFormsModule；NgModule模式则在对应模块的imports中导入这两个模块。

关键注意点 #

• 必须在blur事件中调用onTouched()：错误状态通常需要控件被触摸后才显示，失焦时触发此方法标记控件状态。
• 使用@Self()装饰器：避免NgControl注入冲突，确保获取当前组件关联的表单控件实例。

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