Angular编辑表单中多选下拉框数据绑定异常问题

核心问题 #

多选<select>控件的FormControl值必须是数组类型，如果传入的是字符串（比如后端返回的逗号分隔字符串），或者值的格式与选项不匹配，就会出现后台值已设置但前端未高亮的情况。

具体修复步骤 #

1. 修正下拉框的value绑定方式 #

把插值语法改成属性绑定，避免字符串转义或格式问题：

<select class="form-select" formControlName="sites" [multiple]="true" aria-label="Default select example">
  <option *ngFor="let data of plantList" [value]="data.sites">{{data.sites}}</option>
</select>

2. 正确处理选中值的格式 #

在填充表单数据时，确保传给sites控件的是数组：

addEdiUserDetails(d: any) {
  this.editUserForm.get('username')?.setValue(d.username);
  this.editUserForm.get('email')?.setValue(d.email);
  
  // 处理sites数据：如果是字符串则分割为数组，数组则直接使用
  const targetSites = typeof d.sites === 'string' ? d.sites.split(',') : d.sites;
  this.editUserForm.get('sites')?.setValue(targetSites);
}

3. 检查值的匹配度 #

如果还是不生效，确认targetSites里的每一项和plantList中data.sites的内容完全一致（包括大小写、空格、特殊字符），多选下拉框是严格匹配值来选中选项的。

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