如何基于一个FormControl启用/禁用其他FormControl？已尝试enable/disable无效

你的代码仅在组件初始化时执行一次，当numberOfQuestionsRequiredToSetupProfile的值后续变化时，不会自动触发控件状态更新。结合Angular表单的特性，以下是具体修复方案：

1. 监听目标控件的值变化 #

把状态切换逻辑封装成独立方法，通过valueChanges订阅目标控件的变化，确保值更新时实时同步其他控件状态：

ngOnInit(): void {
  // 初始化时执行一次状态切换
  this.toggleRelatedControls();
  // 监听目标控件的值变化，实时触发逻辑
  const targetControl = this.securityQuestionSetup.get('numberOfQuestionsRequiredToSetupProfile');
  targetControl?.valueChanges.subscribe(() => {
    this.toggleRelatedControls();
  });
}

private toggleRelatedControls(): void {
  const numberOfQuestionsRequired = this.securityQuestionSetup.get('numberOfQuestionsRequiredToSetupProfile')?.value;
  const controlNames = ['numberOfCharToSaveAnswer', 'questionsRequiredForVerification', 'incorrectAttemptsBeforeAccountLockout'];

  if (numberOfQuestionsRequired != null && numberOfQuestionsRequired !== '') {
    controlNames.forEach(name => {
      this.securityQuestionSetup.get(name)?.disable({ emitEvent: false });
    });
  } else {
    controlNames.forEach(name => {
      this.securityQuestionSetup.get(name)?.enable({ emitEvent: false });
    });
  }
}

注：添加{ emitEvent: false }可以避免触发控件值变化事件，防止不必要的循环触发

2. 检查模板绑定问题 #

确保模板中这些控件没有硬编码的[disabled]属性，否则会覆盖FormControl的状态。比如禁止以下写法：

<input formControlName="numberOfCharToSaveAnswer" [disabled]="true">

控件的启用/禁用状态必须完全通过FormControl的enable()/disable()方法控制。

3. 验证表单控件存在性 #

确认securityQuestionSetup表单组初始化时，已正确包含所有需要切换状态的控件。可以在控制台打印this.securityQuestionSetup.value，检查对应字段是否存在。

4. 处理表单重置场景 #

如果表单有重置操作，需要在重置后重新调用toggleRelatedControls()，因为表单重置会将控件状态恢复到初始值，需重新触发状态切换逻辑。

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