基于NgControl实现自定义控件的ngSubmit验证问题

核心问题原因 #

自定义控件未正确同步父表单的markAllAsTouched()操作到内部表单控件，导致触摸状态未更新，验证提示无法触发。

具体修复步骤 #

1. 正确关联NgControl与ControlValueAccessor
   在自定义控件的构造函数中，将当前组件设置为NgControl的valueAccessor，确保双向绑定与状态同步通道打通：

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

2. 完善registerOnTouched方法
   监听内部表单控件的触摸状态变化，触发外部的onTouched回调，让父表单能感知到控件的触摸状态：

registerOnTouched(fn: any): void {
  this.onTouched = fn;
  this.innerControl.statusChanges.subscribe(() => {
    if (this.innerControl.touched) {
      this.onTouched();
    }
  });
}

3. 同步父表单的触摸状态到内部控件
   在组件初始化时，监听父控件的touched状态变化，当父表单调用markAllAsTouched()时，手动标记内部控件为触摸状态：

ngOnInit() {
  this.ngControl.control?.statusChanges.subscribe(() => {
    if (this.ngControl.control?.touched && !this.innerControl.touched) {
      this.innerControl.markAsTouched();
    }
  });
}

4. 模板绑定内部控件状态
   自定义控件的模板中，直接使用内部表单控件的状态来控制验证提示显示：

<input [formControl]="innerControl" placeholder="Custom Input">
<div *ngIf="innerControl.invalid && innerControl.touched">
  This field is required
</div>

完成以上修改后，点击提交按钮调用form.markAllAsTouched()时，自定义控件会和Angular Material控件一致，自动触发验证错误提示。

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