使用Control Value Accessor的Angular子表单markAllAsTouched不生效求助

问题根源 #

当你用Control Value Accessor（CVA）把子表单封装成父表单里的一个独立FormControl时，父表单调用markAllAsTouched()只会作用于这个顶层的子表单控件本身，不会自动递归触碰到子表单内部的控件树。子表单内部的FormGroup/FormControls属于独立的控件实例，父表单的触碰状态无法自动传递进去，这就是为什么错误组件没反应的原因。

最佳实践解决方案（低代码改动） #

我们可以在子表单的CVA实现中，让它响应父控件的touched状态变化，进而触发内部表单的触碰标记。这种方式既保持了CVA的封装性（子表单可独立复用），又不需要修改父表单的逻辑，完全符合最佳实践。

具体实现步骤

在你的子表单组件中，注入NgControl获取当前子表单对应的父控件实例，监听它的状态变化，当父控件被标记为touched时，同步触发子表单内部的markAllAsTouched()：

import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';

@Component({
  selector: 'app-subform',
  templateUrl: './subform.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: SubformComponent,
      multi: true
    }
  ]
})
export class SubformComponent implements ControlValueAccessor, OnInit {
  @Input() documentId: string;
  form: FormGroup;
  private onChange: (value: any) => void;
  private onTouched: () => void;

  constructor(private fb: FormBuilder, private ngControl: NgControl) {
    this.form = this.fb.group({
      figure: ['']
      // 子表单其他字段
    });
  }

  ngOnInit(): void {
    // 监听父控件的状态变化，同步触发内部表单的触碰标记
    this.ngControl.control.statusChanges.subscribe(() => {
      if (this.ngControl.control.touched) {
        this.form.markAllAsTouched();
      }
    });
  }

  writeValue(value: any): void {
    if (value) {
      this.form.patchValue(value);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
    this.form.valueChanges.subscribe(value => this.onChange(value));
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
    // 内部表单被手动触碰时，同步通知父控件
    this.form.valueChanges.subscribe(() => {
      if (this.form.touched) {
        this.onTouched();
      }
    });
  }

  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.form.disable() : this.form.enable();
  }
}

简化版替代方案（无需依赖NgControl）

如果你不想注入NgControl，也可以直接在registerOnTouched方法中，把父控件的触碰回调和内部表单的标记逻辑绑定在一起：

registerOnTouched(fn: any): void {
  this.onTouched = () => {
    // 通知父控件已触碰
    fn();
    // 触发内部所有控件的触碰标记
    this.form.markAllAsTouched();
  };
}

之后在子表单内部的任何控件被手动触碰时，调用this.onTouched()即可保持父子控件的状态同步。

方案优势 #

1. 遵循最佳实践：完全基于CVA的原生机制实现状态同步，保持了子表单的封装性和可复用性，不会和父表单产生强耦合。
2. 代码改动极小：只需要修改子表单组件的内部逻辑，不需要调整父表单的提交代码或添加额外的输入参数。
3. 双向状态同步：既支持父表单触发的触碰标记，也支持子表单内部手动触碰时同步通知父控件，保证状态一致性。

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