Angular5：嵌套FormArray的FormControl为何编辑时自动禁用？

云原生阿岚

2026-5-22

最近在开发一个原本以为是基础款的调度器（Scheduler）组件，结果遇到了个头疼的问题，好在已经找到解决方案了，先跟大家说说核心问题和解决办法，另外还有个全选功能的需求暂时搁置，也想问问大家的思路。

核心问题：禁用行启用后编辑又变回禁用

我遇到的问题是：当组件传入处于禁用状态的行后，手动把这行启用并开始编辑时，它居然又自动变回禁用状态了！但如果我在OnInit钩子初始化的时候就把所有行都设为启用，整个功能就完全正常，一点问题都没有。

我的解决方案

排查了半天，发现问题出在表单控件和数据源的状态不同步上。具体来说，初始化时禁用行的状态虽然同步到了FormArray的对应控件，但手动启用行的时候，只改了数据源的属性，没同步更新表单控件的状态。修复步骤如下：

同步数据源与表单控件的禁用状态
当切换行的启用/禁用状态时，不仅要修改数据源里的disabled属性，还要调用对应FormControl的enable()或disable()方法：

toggleRowStatus(index: number) {
  const row = this.schedulerRows[index];
  row.disabled = !row.disabled;
  const control = this.schedulerFormArray.at(index);
  row.disabled ? control.disable() : control.enable();
}

初始化时正确绑定表单控件状态
在组件初始化构建FormArray的时候，要根据每行的初始disabled属性，直接设置表单组的禁用状态：

ngOnInit() {
  this.schedulerFormArray = this.fb.array(
    this.schedulerRows.map(row => 
      this.fb.group({
        // 这里填你的表单字段，比如time: [row.time], task: [row.task]
      }, { disabled: row.disabled })
    )
  );
}