如何在Angular中结合FormArray与FormGroup使用cdkDropList？

问题现象 #

在Angular里用FormArray搭配cdkDropList做拖拽排序时，只要给拖拽项加上[formGroupName]="i"（不管绑在cdkDrag元素上还是它内部的元素），cdkDrag的拖拽功能就直接失效，连元素上的点击事件也用不了。

问题根源 #

1. 变更检测干扰：*ngFor遍历formArray.value时，表单值变化会生成新的数组引用，触发组件重渲染，打断CDK拖拽的事件监听。
2. 表单上下文错误：formArrayName放在ng-container上是无效的，表单指令需要绑定在实际的DOM元素上才能正确建立上下文。

解决方案 #

核心调整点 #

• 遍历formArray.controls而非formArray.value，保持迭代项引用稳定，避免不必要的重渲染
• 将formArrayName绑定到cdkDropList所在的DOM容器上，建立正确的表单数组上下文

修正后的代码示例 #

模板代码

<div cdkDropList 
     cdkDropListOrientation="horizontal" 
     style="display: flex;"
     formArrayName="formArray">
  <ng-container *ngFor="let group of formArray.controls; let i = index">
    <div cdkDrag [formGroupName]="i">
      <div cdkDragHandle style="padding: 1em; margin: 1em;background: red;">{{i}}</div>
      <!-- 这里可以正常添加FormGroup内的表单控件 -->
      <input formControlName="name" placeholder="输入内容">
    </div>
  </ng-container>
</div>

组件类关键代码

import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

// ...

// 保持原有的FormArray getter
get formArray(): FormArray {
  return this.form.controls["formArray"] as FormArray;
}

// 添加元素的方法可以保留，用push更简洁
addElement(data): void {
  this.formArray.push(this.getNewElementFormGroup(data));
}

// 用FormBuilder创建FormGroup更规范
getNewElementFormGroup(data): FormGroup {
  return this.fb.group({
    name: [data?.name || '']
    // 根据需求添加其他表单控件
  });
}

额外说明 #

• 用formArray.controls遍历后，即使表单值变化，迭代项的引用不会改变，不会触发不必要的组件重渲染，拖拽过程能稳定进行。
• formArrayName绑定在cdkDropList容器上后，内部的[formGroupName]="i"就能正确关联到对应的FormGroup，表单绑定和拖拽功能互不干扰。

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