Angular响应式表单中FormArray带过滤的Autocomplete复用问题

嘿，这个场景我之前在项目里处理过，给你捋清楚解决方案，其实完全不需要为每个Autocomplete创建单独的过滤列表，我们可以复用过滤逻辑，结合FormArray的特性来实现，具体步骤如下：

首先确保你的表单是由包含name控件的FormGroup组成的FormArray，比如在组件里初始化：

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

constructor(private fb: FormBuilder) {}

myForm = this.fb.group({
  items: this.fb.array([
    this.fb.group({ name: [''] }), // 初始的表单组
    this.fb.group({ name: [''] })
  ])
});

// 快捷获取FormArray的方法
get items(): FormArray {
  return this.myForm.get('items') as FormArray;
}

我们可以用一个对象来存储每个表单组对应的过滤后选项，然后通过监听每个name控件的valueChanges来实时更新过滤结果：

// 你的原始选项列表（可以是静态数据或API返回的动态数据）
originalOptions = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
// 存储每个索引对应的过滤结果
filteredOptions: { [key: number]: string[] } = {};

ngOnInit(): void {
  // 初始化时为已有表单控件添加监听
  this.setupFilterForItems();
}

// 统一设置过滤监听的方法
setupFilterForItems(): void {
  this.items.controls.forEach((control, index) => {
    const nameControl = control.get('name');
    nameControl?.valueChanges.pipe(
      startWith(''), // 初始值为空时也触发一次过滤
      map(inputValue => this.filterOptions(inputValue))
    ).subscribe(filtered => {
      this.filteredOptions[index] = filtered;
    });
  });
}

// 通用过滤函数，所有Autocomplete复用这个逻辑
filterOptions(value: string): string[] {
  const filterText = value.toLowerCase().trim();
  return this.originalOptions.filter(option => 
    option.toLowerCase().includes(filterText)
  );
}

在模板里循环FormArray的控件，用formGroupName绑定索引，同时把Autocomplete的选项绑定到对应索引的filteredOptions，注意要用formControlName="name"替代之前的独立FormControl：

<form [formGroup]="myForm">
  <div formArrayName="items">
    <!-- 循环每个表单组 -->
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      <mat-form-field appearance="fill">
        <input 
          type="text"
          matInput
          formControlName="name"
          [matAutocomplete]="auto"
          placeholder="选择或输入名称">
        <mat-autocomplete #auto="matAutocomplete">
          <mat-option 
            *ngFor="let option of filteredOptions[i]" 
            [value]="option">
            {{ option }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
      <button (click)="removeItem(i)">删除该项</button>
    </div>
  </div>
  <button (click)="addNewItem()">添加新项</button>
</form>

如果允许用户动态添加新的表单项，记得在新增时也要为新的name控件设置过滤监听：

addNewItem(): void {
  const newItemGroup = this.fb.group({ name: [''] });
  this.items.push(newItemGroup);
  // 为新的表单组设置过滤监听
  const newIndex = this.items.length - 1;
  const nameControl = newItemGroup.get('name');
  nameControl?.valueChanges.pipe(
    startWith(''),
    map(inputValue => this.filterOptions(inputValue))
  ).subscribe(filtered => {
    this.filteredOptions[newIndex] = filtered;
  });
}

removeItem(index: number): void {
  this.items.removeAt(index);
  // 删除对应索引的过滤结果，避免内存占用
  delete this.filteredOptions[index];
}

• 如果你的选项列表是异步获取的（比如从API拉取），只需要把originalOptions改成Observable<string[]>，然后在过滤逻辑里用switchMap等操作符结合输入值过滤即可。
• 这种方式完全复用了过滤逻辑，不需要为每个Autocomplete写重复代码，维护起来更省心。

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