在 Angular 12 中，FormControl 的 disabled 状态不能仅靠初始化时设置，必须显式调用 enable()/disable() 方法动态更新，否则模板中会残留旧的 disabled 属性，导致 UI 与实际状态不一致。
在 angular 12 中，`formcontrol` 的 `disabled` 状态不能仅靠初始化时设置，必须显式调用 `enable()`/`disable()` 方法动态更新，否则模板中会残留旧的 `disabled` 属性，导致 ui 与实际状态不一致。
在使用 Angular Reactive Forms 时，一个常见却容易被忽视的陷阱是：表单控件的禁用状态（disabled）并非响应式绑定属性，而是初始化快照。这意味着，当你通过数组语法（如 [false] 或 [true, { disabled: true }]）创建 FormControl 时，disabled 仅影响控件的初始状态，后续对 form.get('control').disable() 的调用虽会更新控件内部状态（如 control.disabled === true），但 Angular 的 formControlName 指令并不会自动同步 DOM 的 disabled 属性——尤其在复用同一模板、频繁重建表单实例的场景下（如 ngOnChanges 中反复赋值 this.form = fb.group(...)），极易出现“UI 显示禁用，但 control.enabled 实为 true”的错位现象。
根本原因在于：formControlName 指令在首次绑定时读取控件的 disabled 状态并设置原生 <input> 的 disabled 属性；但当控件状态后续变更（如调用 enable()），该指令不会主动监听或响应 disabled 状态变化，除非你手动触发视图更新（如 ChangeDetectorRef.detectChanges()）或重建指令实例（如切换组件）。
✅ 正确做法是：始终通过 enable() / disable() 方法显式控制状态，并确保每次 ngOnChanges（或其他状态变更点）都覆盖性地设置目标状态：
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
ngOnChanges(changes: SimpleChanges): void {
// 每次重建表单，确保状态干净
this.form = this.fb.group({
name: [''],
checkbox: [false], // 初始启用
});
const checkboxCtrl = this.form.get('checkbox');
if (this.item?.name === 111) {
checkboxCtrl?.disable(); // 显式禁用
} else {
checkboxCtrl?.enable(); // 显式启用 —— 关键！不可遗漏
}
}
⚠️ 注意事项：
-
切勿依赖初始化数组中的
{ disabled: true }来维持动态禁用逻辑，它只生效于创建瞬间； - 若需更健壮的状态同步，可结合
async管道 +valueChanges监听，或在模板中用[attr.disabled]="form.get('checkbox')?.disabled ? '' : null"手动绑定（但推荐优先用enable/disable）； - 在
OnPush策略组件中，若状态更新后 UI 未刷新，可注入ChangeDetectorRef并调用this.cdr.markForCheck()； - 最佳实践：将表单构建与状态控制分离，例如封装为
updateFormState()方法，提升可读性与可测试性。
总结：Angular Reactive Forms 的 disabled 是命令式（imperative）而非声明式（declarative）特性。要实现可靠的动态禁用行为，必须把 enable() 和 disable() 视为状态切换的唯一可信接口，并在所有可能的分支路径中显式调用，避免状态残留导致的 UI 误导。
