Angular中如何循环删除FormArray中的指定元素？

要批量删除FormArray里的指定索引元素，核心是从最大的索引开始往小索引删——因为删除大索引的元素不会改变比它小的元素的索引位置，避免因数组长度变化导致后续删除操作找错位置。

正确实现步骤 #

1. 对需要删除的索引数组做降序排序（确保处理顺序从大到小）
2. 遍历排序后的索引，依次调用formArray.removeAt(index)

示例代码 #

针对你给出的场景，正确代码如下：

const formArray = new FormArray([
  new FormControl(),
  new FormControl(),
  new FormControl(),
  new FormControl(),
  new FormControl()
]);

const arrayOfItemIndexHaveToBeDeleted = [0,1,3,4];

// 先对索引数组降序排序，避免原数组无序导致的错误
const sortedIndices = [...arrayOfItemIndexHaveToBeDeleted].sort((a, b) => b - a);

// 依次删除元素
sortedIndices.forEach(index => formArray.removeAt(index));

为什么你的原代码可能“无效” #

你用reverse()的思路本身没问题，但它只在原索引数组是升序排列时有效。如果索引数组是无序的（比如[3,0,4,1]），直接反转后得到的是[1,4,0,3]，这个顺序会导致删除时索引移位出错（比如先删0后，原索引3会变成2，再删3就会越界）。而先做降序排序，无论原数组顺序如何，都能保证从大到小处理索引，彻底避免这个问题。

另一种思路：创建新的FormArray #

如果不需要保留原FormArray的引用，也可以直接筛选出需要保留的元素，生成新的FormArray：

const newFormArray = new FormArray(
  formArray.controls.filter((_, index) => !arrayOfItemIndexHaveToBeDeleted.includes(index))
);

// 替换原FormArray（如果是组件属性）
this.formArray = newFormArray;

这种方法逻辑更直观，但如果原FormArray是FormGroup的一部分，需要确保绑定关系同步更新。

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