Angular 7使用mat autocomplete编辑表单时控制台值不同文本框显示相同

问题根因 #

你代码的核心问题是*ngFor循环生成的所有输入框，共用了同一个FormControl实例myControl19和同一个mat-autocomplete实例#sss，Angular会把绑定到同一个FormControl的所有输入框的值强制同步，哪怕你ngModel绑定的是不同下标的数组元素，最终也会被FormControl的统一值覆盖，所以所有输入框显示相同内容。

修复方案 #

• 首先给每个动态生成的输入框单独创建FormControl实例，不要共用同一个：

// 先声明属性
myControls: FormControl[] = [];
configfilteredOptions: Observable<any[]>[] = [];

// 生成动态文本框前给每个项初始化单独的FormControl和对应的过滤可观察对象
this.loadTextBox = () => {
  this.options.forEach((_, idx) => {
    const control = new FormControl(this.filters.vos_tag[idx]);
    this.myControls[idx] = control;
    // 对应每个control单独加valueChanges监听，生成对应的过滤选项，_filter替换为你原本的过滤逻辑
    this.configfilteredOptions[idx] = control.valueChanges.pipe(
      startWith(''),
      map(value => this._filter(value))
    )
  })
}

• 然后修改HTML模板，循环里绑定对应下标的FormControl和autocomplete：

<div *ngFor="let option of options; index as idx">
  <label>PATH {{idx+1}}:</label>
  <mat-form-field> 
    <input #fy1 (keyup)="onKeyPress(fy1?.value, idx)" type="text" [(ngModel)]="filters.vos_tag[idx]" matInput [formControl]="myControls[idx]" [matAutocomplete]="sss{{idx}}">
    <mat-autocomplete #sss{{idx}}="matAutocomplete">
      <mat-option *ngFor="let opt of configfilteredOptions[idx] | async" [value]="opt.name">
          {{opt.name}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>

• 额外优化：如果不需要同时使用ngModel和FormControl，建议二选一即可，避免双向绑定冲突，仅用FormControl的话直接拿myControls[idx].value就能获取当前输入值，不用额外绑定ngModel。

补充提示：确保this.filters下的各个数组（vos_tag、vog_tag等）在循环赋值前已经完成初始化，避免出现索引赋值undefined错误。

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