Angular自定义表单控件值变更后无法触发表单dirty状态

Angular 表单的dirty状态标记，核心逻辑是当感知到「用户通过交互触发控件值变化」时，将控件状态从初始干净态切换到脏态，整个链路完全依托ControlValueAccessor约定的回调机制运行。就算完成了NG_VALUE_ACCESSOR与NG_VALIDATORS的依赖注入配置，只要漏掉以下几个关键逻辑，就会出现值更新了但关联表单永远不被标记为dirty的问题：

• 未在用户交互流程中调用registerOnChange注册的回调
  ControlValueAccessor接口要求实现的registerOnChange方法，作用是接收Angular表单层传入的、负责同步值变更+更新状态的核心回调函数。多数实现遗漏的点是：仅在组件内部维护了选中值的变量，从来没有在用户点击复选框的事件回调里，将最新值通过这个注册好的回调同步给表单层。
  正确的触发逻辑参考：

  // 类属性存储表单层注册回来的回调
  onChange: (value: any[]) => void = () => {};
  registerOnChange(fn: (value: any[]) => void) {
    this.onChange = fn;
  }
  // 复选框的用户点击事件回调
  onUserToggleOption(option: OptionItem) {
    // 组件内部更新选中状态
    this.selectedValues = this.getUpdatedSelectedValues(option);
    // 必须通过注册的回调把最新值抛给表单层
    this.onChange(this.selectedValues);
  }
  

  只要表单层通过这个通道收到了值更新，会自动比对当前值和初始值的差异，自动完成dirty状态标记。
• 未正确实现registerOnTouched的回调存储与触发
  部分实现虽然记得存储onChange的回调，但会把registerOnTouched方法写成空实现，既不存储表单层传入的touched回调引用，也不会在用户交互时触发这个回调。
  Angular表单的状态机在处理值变更时，会校验状态链路的完整性，如果完全缺失touched回调的挂载与触发逻辑，部分版本会阻断dirty状态的更新流程。
  正确实现参考：

  // 类属性存储touched回调
  onTouched: () => void = () => {};
  registerOnTouched(fn: () => void) {
    this.onTouched = fn;
  }
  // 和onChange同步，在用户交互时触发
  onUserToggleOption(option: OptionItem) {
    this.selectedValues = this.getUpdatedSelectedValues(option);
    this.onChange(this.selectedValues);
    // 触发touched状态标记
    this.onTouched();
  }
  

• onChange回调的触发时机不符合用户交互场景
  如果把onChange的调用绑定在组件生命周期钩子、@Input属性监听、程序化值赋值的逻辑里（比如options列表加载完成时主动触发onChange），Angular表单系统会将这类变更判定为非用户交互的程序化更新，不会将其计入需要标记dirty的用户操作。只有将onChange的触发绑定到用户实际的DOM交互事件（如复选框的change、click事件）上，才会正常触发dirty标记。
• 依赖注入配置遗漏multi: true参数
  就算已经引入了NG_VALUE_ACCESSOR和NG_VALIDATORS的token，只要漏写了multi: true参数，Angular的依赖注入系统会将当前自定义控件的provider覆盖原有内置的表单控件provider，导致表单层根本无法识别当前组件的ControlValueAccessor实例，所有的内部值变更都无法被感知。

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