mat-select开启multiple后无法读取选中值问题排查

1. 修正表单控件的初始值类型 #

开启multiple后，mat-select的选中值是数组类型，如果你的nazione表单控件初始值不是空数组，就会导致表单无法正确捕获多选结果。

组件中初始化表单时，必须将nazione的初始值设为空数组：

this.myForm = this.fb.group({
  // 其他表单字段...
  nazione: this.fb.control([], Validators.required) // 初始值必须是[]，不能是null/undefined或单个对象
});

2. 校验compareWith函数的实现 #

compareId函数需要正确处理对象比较，同时兼容空值场景，避免多选时匹配逻辑出错：

compareId(obj1: any, obj2: any): boolean {
  // 处理空值，避免报错；同时比较两个对象的id
  return obj1 && obj2 ? obj1.id === obj2.id : obj1 === obj2;
}

3. 排查搜索框占位选项的影响 #

用于放置ngx-mat-select-search的第一个<mat-option>不需要设置[value]，它只是搜索容器，若被意外选中会导致表单值异常。确保这个选项仅作为搜索框的载体，不参与选择逻辑。

4. 检查selectionChange事件的处理逻辑 #

如果onNazioneChange函数中有错误修改表单值的逻辑（比如强行将数组转为单个值），会覆盖多选结果。可以暂时注释掉(selectionChange)="onNazioneChange($event.value)"，测试是否能正常获取数组值，再逐步排查事件函数的问题。

修改完成后，选中多个国家选项，调用this.myForm.getRawValue()就能得到nazione字段为选中对象组成的数组，示例结果：

{
  // 其他字段...
  nazione: [
    { id: 'AF', descrizioneIT: 'Afganistan' },
    { id: 'AL', descrizioneIT: 'Albania' }
  ]
}

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