重置FormControl至初始值后无法保持禁用状态的问题

问题核心是Angular的reset()方法默认会将控件的禁用状态重置为启用，导致原本禁用的控件在重置后变为可编辑。下面提供几种可行的解决方法：

方法1：重置时显式指定禁用状态 #

调用reset()时，第二个参数传入状态配置，保留控件当前的禁用状态：

const control = this.formGroup.get('control');
control.reset('', { disabled: control.disabled });

这样既清空了控件值，又维持了原本的禁用/启用状态。

方法2：先保存状态再恢复 #

如果需要更灵活的处理，可以先记录控件的禁用状态，重置后再恢复：

const control = this.formGroup.get('control');
const wasDisabled = control.disabled;

// 重置控件值
control.reset();

// 恢复原禁用状态
if (wasDisabled) {
  control.disable();
}

方法3：批量处理整个FormGroup的控件 #

如果表单中有多个需要保留禁用状态的控件，可以遍历所有控件批量处理：

// 1. 提前保存所有控件的禁用状态
const disabledStatusMap: { [key: string]: boolean } = {};
Object.keys(this.formGroup.controls).forEach(key => {
  disabledStatusMap[key] = this.formGroup.get(key).disabled;
});

// 2. 重置整个表单
this.formGroup.reset();

// 3. 恢复每个控件的禁用状态
Object.keys(disabledStatusMap).forEach(key => {
  if (disabledStatusMap[key]) {
    this.formGroup.get(key).disable();
  }
});

补充说明 #

Angular的FormControl.reset(value?: any, options?: AbstractControlOptions)方法中，若未指定options.disabled，默认会将控件的禁用状态置为false（即启用），这就是为什么你调用reset()后控件不再禁用的原因。通过上述方法显式控制状态，就能解决这个问题。

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