Angular中拖拽嵌套FormArray后如何获取重排后的value值？

问题本质 #

FormArray.value是当前表单控件值的只读快照副本，直接修改这个副本不会同步到FormArray的内部控件结构中，所以你用它作为moveItemInArray的参数时，拖拽操作不会实际改变表单的控件顺序，自然也无法得到重排后的value。而FormArray.controls是表单控件的实际集合，修改它会直接同步表单的结构和状态。

正确实现方式 #

操作controls数组完成拖拽重排后，value会自动同步为最新的顺序。如果遇到value未及时更新的情况，可以手动触发表单状态同步：

dropRow(event, i) {
  // 操作controls数组完成拖拽重排
  moveItemInArray(this.columnsArray(i).controls, event.previousIndex, event.currentIndex);
  
  // 强制更新表单值与验证状态，确保value同步
  this.columnsArray(i).updateValueAndValidity({ 
    emitEvent: true, // 触发valueChanges事件，通知订阅者
    onlySelf: false  // 影响父表单（如果需要）
  });
  
  // 此时获取的value就是重排后的结果
  const reorderedColumns = this.columnsArray(i).value;
  // 后续可使用reorderedColumns做业务处理
}

关键注意事项 #

• 所有涉及表单结构变更的操作（比如增删、排序控件），必须直接操作controls数组，而非value
• updateValueAndValidity()方法可选，但在复杂嵌套表单场景中，能确保值和状态的即时同步
• 不需要手动修改value，FormArray会根据controls的顺序自动生成对应的value

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