Angular响应式表单问题：用对象修补mat-select控件失效

问题原因 #

mat-select默认用引用相等来匹配选项和表单值。你在patchFormWithCountry里创建的selectedCountries是全新的对象数组，和countries数组里的对象虽然内容一致，但内存引用不同，所以mat-select无法识别为同一个选项，导致选中状态不生效。而传ID数组时，因为是基本类型，值相等就会匹配，所以能正常选中。

解决方案 #

方法1：用compareWith自定义比较逻辑（推荐） #

给mat-select添加[compareWith]属性，指定通过id字段判断对象是否相同，不用依赖引用匹配。

修改模板代码：

<form [formGroup]="countryForm" (ngSubmit)="onSubmit()">
    <mat-form-field appearance="outline">
      <mat-label>Countries</mat-label>
      <mat-select formControlName="countryControl" multiple [compareWith]="compareCountries">
          <mat-option *ngFor="let country of countries" [value]="country">
              {{ country.name }}
          </mat-option>
      </mat-select>
    </mat-form-field>
</form>
<div>
    <button mat-raised-button color="accent" type="button" (click)="patchFormWithCountry()">Patch Form</button>
</div>

在TS文件中添加比较函数：

compareCountries(c1: any, c2: any): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

这样不管是新创建的对象还是原数组里的对象，只要id相同，就会被识别为同一个选项，直接传对象数组调用patchValue就能正常选中。

方法2：从原数组中取匹配对象进行patch #

如果不想用compareWith，可以在patch时直接从countries数组里筛选出对应id的对象，用原数组的对象引用赋值：

修改patchFormWithCountry方法：

patchFormWithCountry() {
  const targetIds = [1,2,3,4];
  const selectedCountries = this.countries.filter(country => targetIds.includes(country.id));

  this.countryForm.patchValue({
    countryControl: selectedCountries,
  });
}

这种方式利用原数组的对象引用，mat-select能直接匹配，但需要提前知道目标id列表。

额外优化提示 #

因为是多选控件，初始化表单时建议把控件初始值设为空数组[]，避免类型不匹配：

ngOnInit() {
  this.countryForm = this.fb.group({
    countryControl: [[]],
  });
}

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