Angular响应式表单多编辑页下拉框默认选中值设置问题

你当前代码中tariff字段的FormControl初始值写死为this.ddlTariff[0].tariffId，所以无论加载哪条记录，下拉框都会默认选中选项列表的第一项，无法匹配当前记录已保存的关联值。

根据下拉框的绑定逻辑分两种情况处理：

场景1：下拉框选项绑定主键ID（最常用） #

如果模板中option的value绑定的是tariffId这类主键值，直接将FormControl的初始值替换为当前编辑项关联的tariff主键即可，不要写死取数组第一项：

private createFormGroupItem(item: YourBusinessItemType): FormGroup {
    return this.formBuilder.group({
      title: new FormControl(item.title, [Validators.required]),
      effectiveDate: new FormControl(item.effectiveDate, [Validators.required]),
      // 直接取当前记录关联的tariffId作为初始值，兼容tariff为嵌套对象的结构
      tariff: new FormControl(item.tariffId ?? item.tariff?.tariffId, [Validators.required])
    });
}

对应的模板写法参考：

<select formControlName="tariff">
  <option *ngFor="let tariffItem of ddlTariff" [value]="tariffItem.tariffId">
    {{tariffItem.tariffName}}
  </option>
</select>

场景2：下拉框绑定整个Tariff对象 #

如果需要在表单中直接存取完整的Tariff对象，需要给<select>标签添加compareWith指令，提供自定义匹配逻辑告诉Angular如何判定两个Tariff选项是同一项：

1. 首先在组件类中添加匹配函数：

   // 主键相同则判定为同一个tariff选项
   compareTariff(opt1: Tariff, opt2: Tariff): boolean {
     return opt1?.tariffId === opt2?.tariffId;
   }
   

2. 模板中给select标签绑定该匹配函数，option用[ngValue]绑定整个对象：

   <select formControlName="tariff" [compareWith]="compareTariff">
     <option *ngFor="let tariffItem of ddlTariff" [ngValue]="tariffItem">
       {{tariffItem.tariffName}}
     </option>
   </select>
   

3. FormControl初始值直接传入当前记录关联的tariff对象即可：

   tariff: new FormControl(item.tariff, [Validators.required])
   

• 必须等下拉全量选项数据集ddlTariff加载完成后，再初始化表单组，否则初始值无法匹配到对应选项，会显示空白
• 绑定ID值时注意保持类型一致：比如tariffId是数字类型，就不要传字符串格式的数字作为初始值，否则会出现匹配失败的问题
• 测试时直接将示例中的mock模拟数据替换为你实际业务接口返回的选项数组、待编辑记录数组即可，不需要调整核心表单逻辑。

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