Angular动态创建mat-form-field选中值互相覆盖如何实现独立控制

问题根因 #

你当前所有动态生成的<mat-select>都绑定了全局唯一的days FormControl实例，任意一个下拉的选中值修改都会同步到所有绑定该控件的元素，因此会出现选中值互相覆盖的问题。

代码修改 #

1. TS 代码调整 #

改用FormArray存储每个条目对应的独立FormControl，每次新增条目时创建新的FormControl实例，默认值设为当天星期：

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

// 修正原数组拼写错误Thuesday→Tuesday
daysList: string[] = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
// 用FormArray存储每个条目的独立FormControl
timesFormArray: FormArray = new FormArray([]);

openExecutionTimeScheduler() {
  const now = new Date();
  const weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  const todayWeekDay = weekday[now.getDay()];
  // 每次新增创建独立FormControl，默认选中当天
  this.timesFormArray.push(new FormControl([todayWeekDay]));
  // 如果需要同步原有times数组，可同时执行以下操作
  // this.times.push({});
}

如果需要获取所有条目的选中值，直接读取this.timesFormArray.value即可，返回值是和条目顺序对应的选中值数组。如果要删除指定索引的条目，调用this.timesFormArray.removeAt(index)即可。

2. HTML 代码调整 #

将每个<mat-select>绑定到FormArray对应索引的独立FormControl：

<!-- 若保留原times数组遍历写法，绑定改为[formControl]="timesFormArray.at(i)"即可 -->
<div style="display:flex; flex-direction:row" class="m-portlet__body" *ngFor="let control of timesFormArray.controls; let i = index;">
  <mat-form-field appearance="outline">
    <mat-label>Days Of Week</mat-label>
    <mat-select [formControl]="control" multiple>
      <mat-option *ngFor="let day of daysList" [value]="day">{{day}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>

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