新输入变更时子组件FormGroup的disable属性未生效如何解决

问题根因 #

• 子组件调用addControl时，若FormGroup中已存在同名的supportType控件，Angular默认不会覆盖已有控件，新设置的禁用状态不会生效
• 父组件newGraphicElements方法中先重置FormGroup、再更新isBlocMainSupport的赋值顺序，可能导致Input变更时序错位：FormGroup变更先触发ngOnChanges时，isBlocMainSupport还是旧值，后续isBlocMainSupport更新时，因为控件已存在，addControl无法更新状态

修复方案 #

1. 调整子组件表单控件更新逻辑 #

两种实现方式二选一即可：

方式一：先移除旧控件再新增

setForm() {
  // ...原有其他逻辑
  const controlName = 'supportType';
  // 先移除已存在的同名控件
  if (this.edvForm.contains(controlName)) {
    this.edvForm.removeControl(controlName);
  }
  this.edvForm.addControl(
    controlName,
    new FormControl({ value: supportType, disabled: !this.isBlocMainSupport })
  );
}

方式二：直接更新已有控件的状态和值

性能更优，无需销毁重建控件：

setForm() {
  // ...原有其他逻辑
  const controlName = 'supportType';
  if (this.edvForm.contains(controlName)) {
    const control = this.edvForm.get(controlName);
    control.setValue(supportType);
    !this.isBlocMainSupport ? control.disable() : control.enable();
  } else {
    // 控件不存在时走新增逻辑
    this.edvForm.addControl(
      controlName,
      new FormControl({ value: supportType, disabled: !this.isBlocMainSupport })
    );
  }
}

2. 调整父组件赋值顺序（可选，优化时序稳定性） #

先更新业务状态，再重置表单，避免Input变更时序错位：

newGraphicElements(newData: Data[]) {
  // 先更新业务参数
  this.data = newData[0];
  this.isBlocMainSupport = myCondition; // 可直接赋值布尔值，不需要三元运算
  // 再重置表单
  this.reset();
  // ...原有其他逻辑
}

3. 优化ngOnChanges触发逻辑（可选，减少不必要执行） #

仅相关Input变更时才执行表单更新逻辑：

ngOnChanges(changes: SimpleChanges): void {
  if (changes['data'] || changes['isBlocMainSupport'] || changes['edvForm']) {
    this.setForm();
  }
}

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