Storybook中Reactive Forms绑定Dropdown组件值不更新问题

问题现象 #

• 在Storybook里用Angular FormControl/FormGroup绑定自定义Dropdown组件，初始值能正常显示，但手动修改Dropdown选项时，FormControl的值完全没变化。
• 但把这个组件放到正常Angular项目里使用，一切功能都正常。
• 原组件里onChangeForm一开始是直接声明的空函数，通过registerOnChange赋值；改成带getter/setter的属性后，同步问题就解决了。

根本原因 #

核心是Storybook的组件渲染上下文和正常Angular项目存在差异：

1. 原写法中，onChangeForm是直接赋值的属性，初始值为() => {}。在Storybook的渲染机制下，Angular表单控件调用registerOnChange赋值时，新的回调函数引用可能没被正确绑定到组件实例上——简单说就是，Dropdown值变化时调用的还是最初的空函数，根本没通知到FormControl更新。
2. 改成getter/setter后，相当于给onChangeForm加了一层访问拦截：不管是赋值还是调用，都会通过getter/setter逻辑处理，确保回调函数的引用始终是最新的，不会被Storybook的上下文缓存或属性传递问题干扰。

代码对比 #

有问题的写法 #

// 自定义Dropdown组件内部
onChangeForm: any = () => {};

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

修复后的写法 #

// 自定义Dropdown组件内部
private _onChangeForm: any = () => {};

get onChangeForm(): any {
  return this._onChangeForm;
}

set onChangeForm(fn: any) {
  this._onChangeForm = fn;
}

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

额外验证建议 #

• 可以在原代码的registerOnChange里加console.log，看看在Storybook中这个方法是否被调用，以及赋值后的onChangeForm和传入的fn是否为同一引用，能更直观地定位问题。
• 也可以尝试把Storybook里formGroup的创建移到render函数外部，避免每次渲染都重新创建，但这只是临时 workaround，用getter/setter的方案更可靠。

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