如何在Angular响应式表单中设置多选框的选中项？

问题核心 #

使用响应式表单的多选下拉框时，FormControl能正常设置和获取值，但目标选项（如'Florida'）在视觉上未显示选中状态。

常见原因及解决方案 #

场景1：选项为对象类型（如{name: 'Florida'}） #

Angular默认通过对象引用判断选中状态，而非对象属性值。即使属性值匹配，对象引用不一致也会导致视觉选中失效。

处理步骤：

• 在组件类中定义比较函数，通过对象唯一标识（如name属性）判断匹配：

compareState(option: any, selected: any): boolean {
  return option?.name === selected?.name;
}

• 在模板的下拉框组件上绑定该函数：

<select [formControl]="stateControl" multiple [compareWith]="compareState">
  <option *ngFor="let state of states" [value]="state">{{state.name}}</option>
</select>

• 初始化FormControl时，传入与选项数组中属性匹配的对象：

stateControl = new FormControl([this.states.find(s => s.name === 'Florida')]);

场景2：选项为字符串类型 #

多选模式下，FormControl的值必须是数组格式，若直接传入单个字符串会导致匹配异常。

处理步骤：

• 确保FormControl初始值为数组形式：

stateControl = new FormControl(['Florida']);

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