如何重置ControlValueAccessor？表单重建后组件状态不同步问题

问题根源 #

重建表单后，新的FormControl实例与MetricComponent的状态同步机制未自动触发setDisabledState方法，导致控件残留之前的禁用状态。

解决办法 #

方法一：重建表单后手动同步状态

在MainComponent中获取MetricComponent实例，在表单重建完成后主动调用其状态更新方法：

1. 在MainComponent中添加视图引用：

@ViewChild(MetricComponent) private metricComp!: MetricComponent;

2. 修改initForm方法，末尾同步控件状态：

initForm(): void {
    this.form = this.formBuilder.group({
      id: [{ value: 'id', disabled: true }],
      metric: [this.metric]
    });
    // 同步自定义控件的禁用状态
    this.metricComp.setDisabledState(this.form.get('metric')!.disabled);
}

方法二：在自定义控件内监听FormControl状态变化

在MetricComponent中注入关联的FormControl，监听其状态变化自动更新自身禁用状态：

import { Component, OnInit, inject } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-metric',
  templateUrl: './metric.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: MetricComponent,
      multi: true
    }
  ]
})
export class MetricComponent implements ControlValueAccessor, OnInit {
  private control = inject(FormControl);
  private isDisabled = false;

  // 实现ControlValueAccessor的其他方法（writeValue、registerOnChange、registerOnTouched）
  writeValue(value: any): void { /* 你的实现逻辑 */ }
  registerOnChange(fn: any): void { /* 你的实现逻辑 */ }
  registerOnTouched(fn: any): void { /* 你的实现逻辑 */ }

  setDisabledState(isDisabled: boolean): void {
    this.isDisabled = isDisabled;
    // 处理控件UI的禁用逻辑
  }

  ngOnInit(): void {
    // 监听FormControl状态变化，自动同步禁用状态
    this.control.statusChanges.subscribe(() => {
      this.setDisabledState(this.control.disabled);
    });
  }
}

方法三：重建表单时显式控制控件状态

如果需要继承原表单的控件状态，可在创建新表单时显式设置禁用属性：

initForm(): void {
    // 获取原表单metric控件的禁用状态（若存在）
    const prevMetricDisabled = this.form?.get('metric')?.disabled ?? false;
    this.form = this.formBuilder.group({
      id: [{ value: 'id', disabled: true }],
      metric: [{ value: this.metric, disabled: prevMetricDisabled }]
    });
}

注：此方法适用于需要保留原状态的场景，若重建后需默认启用表单，优先选择前两种方法。

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