启用父表单时，valueChanges中禁用子FormControl的操作被忽略

当父表单被禁用后重新启用时，Angular会递归启用所有子控件，这会直接覆盖你通过valueChanges设置的第二个复选框的禁用状态。哪怕valueChanges回调在此时触发，你的disable()调用也会被父表单的启用操作覆盖，导致第二个复选框保持启用状态。

不需要完全重构逻辑，但必须在父表单重新启用后，手动执行一次第二个复选框的状态控制逻辑，具体步骤如下：

1. 提取状态控制逻辑为独立函数
   把判断第一个复选框状态、设置第二个复选框禁用/启用的逻辑抽出来，方便重复调用：

private syncSecondCheckboxStatus() {
  const firstCheckbox = this.form.get('first');
  const secondCheckbox = this.form.get('second');
  if (!firstCheckbox || !secondCheckbox) return;

  // 根据第一个复选框的值，设置第二个的状态
  if (firstCheckbox.value) {
    secondCheckbox.enable({ onlySelf: true, emitEvent: false });
  } else {
    secondCheckbox.disable({ onlySelf: true, emitEvent: false });
  }
}

• onlySelf: true：确保只修改当前控件的状态，不影响父表单
• emitEvent: false：避免触发额外的valueChanges订阅，防止循环调用

2. 在两个时机调用该函数

• 第一个复选框的valueChanges订阅中，保持原有的实时同步：

  this.form.get('first')?.valueChanges.subscribe(() => {
    this.syncSecondCheckboxStatus();
  });
  

• 父表单重新启用后，立即手动调用一次，覆盖父表单启用带来的状态重置：

  // 模拟异步操作（比如API请求）
  setTimeout(() => {
    this.form.enable();
    // 手动同步状态，修复被父表单覆盖的问题
    this.syncSecondCheckboxStatus();
  }, 1000);
  

这样就能保证父表单启用后，第二个复选框的状态会根据第一个复选框的实际值重新设置，不会被父表单的启用操作覆盖。

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