自定义MatFormFieldControl初始值未在视图展示、清空值显示异常问题

自定义MatFormFieldControl视图异常修复方案 #

核心修复点 #

• 确保MatFormFieldControl接口要求的stateChanges observable正确实现，所有内部值变更的场景都要触发stateChanges.next()，Angular Material表单字段依赖该事件触发视图重渲染，漏发该事件是内部值正确但视图不更新的最常见原因。
• 修正ControlValueAccessor的writeValue实现，该方法是外部表单值同步到自定义控件的唯一入口，要在值写入后主动触发状态更新和变更检测，参考实现：

// 类成员定义
stateChanges = new Subject<void>();
private innerValue: any;
onChange = (val: any) => {};
onTouched = () => {};

constructor(private cdr: ChangeDetectorRef) {}

writeValue(value: any): void {
  this.innerValue = value ?? null;
  this.stateChanges.next();
  this.cdr.markForCheck();
}

// 自定义值更新方法
updateValue(newVal: any) {
  this.innerValue = newVal;
  this.onChange(newVal);
  this.stateChanges.next();
  this.cdr.markForCheck();
}

// 组件销毁时要关闭stateChanges避免内存泄漏
ngOnDestroy() {
  this.stateChanges.complete();
}

• 清空值操作时统一将内部值设为null，不要设置为空字符串或undefined，避免和表单控件的空值判定逻辑冲突。
• 针对compareFn导致的初始值显示异常：将compareFn移到外层使用mat-select的标签上，不要在自定义控件内部定义，同时确保初始值和option的value类型完全匹配，比如option值为数字11时，初始值不要传入字符串'11'，类型不匹配会触发默认显示All的异常。

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