Angular ReactiveForm中mat-select无法用patchValue设值的原因咨询

当你尝试通过this.group.patchValue({ select: { id: 2, name: 'Charmander2' } });给mat-select赋值失败时，核心原因是Angular Material的mat-select默认采用引用相等性匹配选项。

你创建的{ id: 2, name: 'Charmander2' }是一个全新的对象引用，而mat-select下拉列表中的选项是另一个独立的对象引用——即便两者属性完全一致，Angular也会判定这是两个不同的选项，因此无法完成选中匹配。

两种可行解决方法 #

方法一：用compareWith自定义匹配逻辑 #

通过compareWith指令告诉mat-select如何判断两个对象是否为同一选项，通常基于唯一标识（如id）比较：

1. 在模板的mat-select标签上添加绑定：

<mat-select formControlName="select" [compareWith]="compareOptions">
  <!-- 下拉选项内容 -->
</mat-select>

2. 在组件类中定义匹配函数：

compareOptions(opt1: any, opt2: any): boolean {
  return opt1 && opt2 ? opt1.id === opt2.id : opt1 === opt2;
}

设置后，只要对象的id匹配，即便传入新对象，mat-select也能正确识别并选中对应选项。

方法二：使用现有选项数组的对象引用赋值 #

直接从下拉选项数组中找到目标对象的引用，再传递给patchValue或setValue：

// 假设你的选项数组名为options
const targetOption = this.options.find(opt => opt.id === 2);
this.group.patchValue({ select: targetOption });

这种方式复用了数组中已存在的对象引用，和mat-select选项的引用完全一致，可直接完成选中匹配。

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