如何在ControlValueAccessor中触发valueChanges变更检测？

你的核心问题是自定义表单控件与内部FormControl的逻辑冲突，导致setValue无法触发外部的valueChanges，同时直接调用this.changed会报错。以下是具体修复方案：

问题根源 #

1. 你实现了NG_VALUE_ACCESSOR自定义表单控件，但又在组件内部实例化了myCtrl这个FormControl，两者功能重叠，破坏了Angular表单系统的交互逻辑。
2. this.changed报错是因为Angular仅在外部将组件作为表单控件使用时，才会调用registerOnChange赋值该函数，直接提前调用会出现未定义错误。

修复代码 #

1. 模板修改（移除内部FormControl绑定） #

<mat-select [(value)]="selectedValue" 
            (selectionChange)="onSelectionChange($event.value)"
            [disabled]="isDisabled">
  <mat-option ... >{{ ... }}</mat-option>
</mat-select>

2. TypeScript逻辑重构（遵循自定义表单控件规范） #

providers: [
  {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => MyComponent),
    multi: true,
  },
],
...
public selectedValue: number;
// 初始化空函数，避免未注册前调用报错
private onChange: (value: number) => void = () => {};
private onTouched: () => void = () => {};
public isDisabled: boolean;

writeValue(value: any): void {
  this.selectedValue = value;
}

registerOnChange(fn: any): void {
  this.onChange = fn;
}

registerOnTouched(fn: any): void {
  this.onTouched = fn;
}

setDisabledState(isDisabled: boolean): void {
  this.isDisabled = isDisabled;
}

// 处理下拉框选择事件，同步通知外部表单系统
onSelectionChange(value: number): void {
  this.selectedValue = value;
  this.onChange(value);
  this.onTouched();
}

ngOnInit(): void {
  this.subject$.subscribe((data) => {
    this.data = data;
    if (data) {
      // 更新内部值并主动触发外部变更通知
      this.selectedValue = 1;
      this.onChange(1);
      this.onTouched();
    }
  });
}

关键说明 #

• 自定义表单控件无需内部维护FormControl，通过writeValue、registerOnChange等方法与Angular表单系统交互即可。
• 初始化onChange为空函数，避免在Angular未完成注册前调用导致的类型错误。
• 无论是用户手动选择还是代码主动更新值，都需要调用this.onChange()通知外部表单系统，这样外部绑定的FormControl的valueChanges才能感知到变化。

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