Angular 16+中ControlValueAccessor自定义输入验证失效的解决方法

我在Angular中使用ControlValueAccessor创建自定义输入组件时，发现FormControls的验证功能停止工作了。我制作了一个简单示例复现该问题。

自定义组件代码：

@Component({
  selector: 'app-text-field',
  templateUrl: './text-field.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule],
})
export class TextFieldComponent implements ControlValueAccessor, OnInit {
  protected control = inject(NgControl); // control should be injected

  onChange(value: string) {}
  onTouch() {}

  value = '';

  ngOnInit(): void {
    this.control.valueAccessor = this;
  }

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

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

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

我无法提供NG_VALIDATORS，因为这会产生循环依赖，且找不到Angular 16+仍可用或可视为最佳实践的代码。那么支持验证的最佳方式是什么？

编辑补充：组件使用方式 #

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, TextFieldComponent],
  template: `
    <form [formGroup]="form">
      <app-text-field formControlName="a" />
    </form>
    <p>{{ form.errors }}</p>
  `,
})
export class App {
  form = new FormGroup({
    a: new FormControl<string>('', {
      validators: [
        Validators.required,
        Validators.maxLength(8),
        Validators.minLength(2),
      ],
    }),
  });

  constructor() {
    this.form.valueChanges.subscribe((val) =>
      console.log(val, this.form.errors)
    );
  }
}

解决方法 #

问题核心在于手动设置this.control.valueAccessor = this的方式破坏了Angular内部的验证关联逻辑。Angular 16+独立组件中，正确做法是通过viewProviders配置让框架自动关联NgControl与ControlValueAccessor，避免循环依赖同时恢复验证功能。

修改自定义组件的@Component装饰器，并移除无效的手动赋值代码：

@Component({
  selector: 'app-text-field',
  templateUrl: './text-field.component.html',
  standalone: true,
  imports: [CommonModule, FormsModule],
  viewProviders: [
    {
      provide: NgControl,
      useFactory: () => inject(NgControl, { skipSelf: true })
    }
  ]
})
export class TextFieldComponent implements ControlValueAccessor {
  protected control = inject(NgControl);

  onChange(value: string) {}
  onTouch() {}

  value = '';

  // 移除ngOnInit中的手动赋值代码
  // ngOnInit(): void {
  //   this.control.valueAccessor = this;
  // }

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

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

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

额外注意事项 #

必须在组件模板中正确触发值变更和触摸事件，确保Angular能感知控件状态变化：

<!-- text-field.component.html 示例 -->
<input 
  type="text" 
  [value]="value" 
  (input)="onChange($event.target.value); onTouch()"
  (blur)="onTouch()"
/>

关键原理说明 #

• 通过viewProviders的useFactory注入NgControl，skipSelf: true参数避免了循环依赖，同时让Angular正确将自定义组件的ControlValueAccessor与外部的FormControl绑定。
• 移除手动赋值valueAccessor的代码，恢复Angular原生的验证状态同步逻辑。
• 触发onChange和onTouch是表单控件脏值状态、值变更感知的前提，缺失会导致验证无法触发。

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