Angular动态Mat Autocomplete问题：FormControl类型错误与数据覆盖

核心方案 #

用FormArray替代单个FormControl来管理所有动态输入框，让每个输入框对应独立的表单控件，从根源避免数据覆盖问题，同时通过类型断言解决FormControl的类型错误。

TS端实现代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

@Component({
  selector: 'app-dynamic-autocomplete',
  templateUrl: './dynamic-autocomplete.component.html',
  styleUrls: ['./dynamic-autocomplete.component.css']
})
export class DynamicAutocompleteComponent {
  dynamicForm: FormGroup;
  // 全局选项列表，也可给每个控件单独配置数据源
  options: string[] = ['选项A', '选项B', '选项C', '选项D'];
  // 存储每个控件的过滤后选项流
  filteredOptions$: Observable<string[]>[] = [];

  constructor(private fb: FormBuilder) {
    // 初始化表单，默认添加一个输入控件
    this.dynamicForm = this.fb.group({
      items: this.fb.array([this.createSingleControl()])
    });
    // 初始化过滤选项流
    this.refreshFilteredOptions();
  }

  // 快捷获取FormArray
  get itemsArray(): FormArray {
    return this.dynamicForm.get('items') as FormArray;
  }

  // 创建单个FormControl
  createSingleControl(): FormControl {
    return this.fb.control('');
  }

  // 添加新的输入框
  addNewItem(): void {
    this.itemsArray.push(this.createSingleControl());
    this.refreshFilteredOptions();
  }

  // 移除指定索引的输入框
  removeItem(index: number): void {
    this.itemsArray.removeAt(index);
    this.refreshFilteredOptions();
  }

  // 更新所有控件的过滤选项流
  refreshFilteredOptions(): void {
    this.filteredOptions$ = this.itemsArray.controls.map(control => {
      return control.valueChanges.pipe(
        startWith(''),
        map(value => this.filterOptions(value))
      );
    });
  }

  // 选项过滤逻辑
  private filterOptions(value: string): string[] {
    const filterText = value.toLowerCase();
    return this.options.filter(option => option.toLowerCase().includes(filterText));
  }
}

HTML端实现代码 #

<form [formGroup]="dynamicForm">
  <div formArrayName="items">
    <!-- 循环渲染所有动态输入框 -->
    <div *ngFor="let control of itemsArray.controls; let i = index" class="input-wrapper">
      <input 
        type="text"
        matInput
        [formControlName]="i"
        [matAutocomplete]="auto"
        placeholder="选择或输入选项"
      >
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of filteredOptions$[i] | async" [value]="option">
          {{ option }}
        </mat-option>
      </mat-autocomplete>
      <!-- 移除按钮，至少保留一个输入框 -->
      <button 
        mat-icon-button 
        (click)="removeItem(i)"
        *ngIf="itemsArray.length > 1"
      >
        <mat-icon>delete</mat-icon>
      </button>
    </div>
  </div>
  <!-- 添加新输入框按钮 -->
  <button mat-raised-button (click)="addNewItem()" style="margin-top: 16px;">
    添加新条目
  </button>
</form>

关键细节说明 #

• 类型处理：通过as FormArray对FormArray进行类型断言，避免TS类型报错；遍历控件时直接使用itemsArray.controls，确保每个元素都是FormControl类型。
• 独立数据源：如果需要给每个输入框配置不同的选项，可以给每个FormControl附加自定义属性（比如control['customOptions'] = ['自定义选项1', '自定义选项2']），然后在过滤逻辑中读取对应控件的自定义选项。
• 过滤流更新：每次添加/移除控件后必须调用refreshFilteredOptions，确保新控件的Autocomplete能正常生成过滤选项流。

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