如何在Angular中使用Pipe过滤FormArray查找特定值？

问题背景 #

将FormArray传入Pipe的transform方法，希望通过其控件值中的firstName字段过滤有效用户，但现有代码存在逻辑错误，无法正常执行：

export class FilterPipe implements PipeTransform {
  transform(nameData: FormArray, searchData:string) : FormArray{

    if(searchData === ""){
      return nameData;
  }
    var arrayForms = nameData.value;
    for(var element of arrayForms){
      if(element.valid){
        return arrayForms.filter((arrayForm)=> {
          return arrayForm.value.firstName.includes(searchData);
        })
      }
    }   
 }

遇到的问题：

• 直接调用FormArray.filter报错，因为FormArray不支持数组原生的filter方法
• 尝试通过nameData.value转换数组时，无法访问valid属性，逻辑失效
• 目标：基于firstName字段实现有效用户的过滤

问题分析 #

1. 结构误解：nameData.value返回的是控件值的普通数组，而非FormControl/FormGroup对象，因此不存在valid属性，也不能通过arrayForm.value嵌套访问字段。
2. 返回类型不兼容：arrayForms.filter返回普通数组，但方法声明返回FormArray，类型不匹配。
3. 循环逻辑错误：for...of循环中首次满足条件就直接返回，导致仅处理第一个元素就终止，无法完成全局过滤。

正确实现代码 #

import { Pipe, PipeTransform } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(nameData: FormArray, searchData: string): FormArray {
    // 搜索关键词为空时，直接返回原FormArray
    if (!searchData.trim()) {
      return nameData;
    }

    const normalizedSearch = searchData.toLowerCase();

    // 过滤出有效且firstName匹配的FormGroup控件
    const filteredControls = nameData.controls
      .filter(control => control instanceof FormGroup && control.valid)
      .filter((group: FormGroup) => {
        const firstName = group.get('firstName')?.value?.toLowerCase() || '';
        return firstName.includes(normalizedSearch);
      });

    // 将过滤后的控件重新封装为FormArray返回
    return new FormArray(filteredControls);
  }
}

关键说明 #

• 使用nameData.controls获取FormArray中的控件集合，这才是包含valid状态和value的对象列表。
• 加入大小写不敏感处理，避免因输入大小写导致的匹配遗漏。
• 用可选链操作符?.防止空值报错，适配firstName控件未定义或值为null的场景。
• 最终将过滤后的控件重新创建为FormArray，保证返回类型符合方法声明。

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