Angular中如何根据条件过滤FormArray的controls？

云原生阿岚

2026-6-25

过滤Angular FormArray的controls方法

你现在的问题是用value.filter()拿到的是表单值数组，不是FormControl/FormGroup实例，没法直接替换HTML里遍历的controls数组。下面给你三种可行的实现方式：

1. 组件内定义过滤后的controls数组（推荐复用场景）

在组件里新增一个getter，直接对controls数组做过滤：

get filteredChecklistItems(): AbstractControl[] {
  // 替换成你的实际过滤条件，比如根据id筛选
  return this.checklistItems().controls.filter(control => {
    const itemData = control.value;
    return itemData.id > 5; // 示例：保留id大于5的项
  });
}

然后在HTML里遍历这个过滤后的数组：

<div *ngFor="let checkList of filteredChecklistItems; let checkListIndex=index"></div>

2. HTML中直接过滤（适合简单场景）

如果过滤逻辑简单，也可以直接在*ngFor后面加*ngIf判断，不过这种方式只是隐藏不符合条件的元素，原FormArray的内容不会改变：

<div *ngFor="let checkList of checklistItems().controls; let checkListIndex=index"
     *ngIf="checkList.value.id !== 3"> <!-- 示例：排除id为3的项 -->
</div>

3. 修改原FormArray结构（需要移除不符合条件的项时用）

如果要真正从FormArray里删掉不符合条件的控件，而不是只是隐藏，可以清空原数组后重新添加筛选后的控件：

// 筛选符合条件的controls
const validControls = this.checklistItems().controls.filter(control => {
  return control.value.id !== 2; // 示例：移除id为2的项
});

// 清空原FormArray并重新添加
this.checklistItems().clear();
validControls.forEach(control => this.checklistItems().push(control));