Angular表单多个mat-chip输入框填写首个后其余自动填充问题求解

• 多个chip输入区域绑定了同一个存储chip的数组变量：SendTo、CC、BCC三个列表没有分别声明独立的状态数组，共用同一个数组变量时，任意输入新增的chip都会同步到所有绑定该数组的视图。
• 事件处理逻辑未区分触发源：三个输入框的新增事件绑定了同一个处理函数，但函数内部未判断触发来源，直接往同一个数组写入数据。
• 模板引用变量冲突：多个<mat-chip-grid>使用了相同的模板引用变量名，且<input>的[matChipInputFor]属性都绑定了该重复名称，Angular会默认匹配第一个找到的元素，导致逻辑串用。
• 响应式表单绑定错误：如果使用响应式表单，多个输入框绑定了同一个FormControl实例，也会触发值同步。
• 可复用组件状态未隔离：封装的公共chip组件内部状态依赖全局共享变量，未做实例级隔离，导致多个组件实例状态同步。

1. 给每个邮件列表声明独立的存储数组

// 分别声明三个独立的状态数组
sendToChips: string[] = [];
ccChips: string[] = [];
bccChips: string[] = [];

2. 区分事件触发源，可选择给每个输入框写独立的处理函数，或在公共函数中增加类型标识：

// 带类型标识的公共新增逻辑
add(event: MatChipInputEvent, type: 'sendTo' | 'cc' | 'bcc') {
  const value = (event.value || '').trim();
  if (value) {
    this[`${type}Chips`].push(value);
  }
  // 清空当前触发事件的输入框内容
  event.chipInput!.clear();
}

模板对应绑定独立的模板变量和事件参数：

<!-- SendTo输入区域 -->
<mat-chip-grid #sendToGrid>
  <mat-chip-row *ngFor="let chip of sendToChips">{{chip}}</mat-chip-row>
</mat-chip-grid>
<input [matChipInputFor]="sendToGrid" (chipInputAdd)="add($event, 'sendTo')" />

<!-- CC输入区域 -->
<mat-chip-grid #ccGrid>
  <mat-chip-row *ngFor="let chip of ccChips">{{chip}}</mat-chip-row>
</mat-chip-grid>
<input [matChipInputFor]="ccGrid" (chipInputAdd)="add($event, 'cc')" />

<!-- BCC输入区域逻辑同上，绑定独立变量和bcc类型参数即可 -->

3. 封装可复用组件时需确保状态完全隔离，chip存储数组、输入框临时值等状态都声明为组件内部私有属性，仅通过@Input、@Output和外部做数据交互，不要依赖全局共享状态。

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