Angular响应式表单下拉框默认选中失效问题求助

问题根源 #

1. 循环渲染的选项同时设置了[ngValue]="um"和value=""，后者会覆盖前者的绑定逻辑，导致选项值统一为空字符串，和FormControl初始的undefined无法匹配。
2. Angular响应式表单会优先以FormControl的状态为准，原生的selected属性会被表单控件状态覆盖，所以单纯加selected标签属性无效。

修复步骤 #

• 修正HTML选项绑定：移除循环选项中的value=""，保留[ngValue]="um"确保每个选项绑定正确的um对象：

<select formControlName="unit_measurement" name="unit_measurment" id="unit_measurment">
    <option disabled value="">Выберите ед. измерения</option>
    <option *ngFor="let um of unitMeasurements" [ngValue]="um">{{ um.value }}</option>
</select>

• 同步FormControl初始值：将unit_measurement的初始值从undefined改为空字符串''，和提示选项的value=""匹配，表单初始化时会自动选中该选项：

addForm = new FormGroup({
    name: new FormControl(undefined,[ 
      Validators.required
    ]),
    quantity: new FormControl(undefined,[ 
      Validators.required,
      Validators.min(0)
    ]),
    unit_cost: new FormControl(undefined,[ 
      Validators.required,
      Validators.min(0)
    ]),
    unit_measurement: new FormControl('',[ 
      Validators.required
    ])
  })

• 异步数据场景补充：如果unitMeasurements是异步加载的（比如HTTP请求获取），需要在数据加载完成后通过patchValue设置初始值（如果要选中第一个有效选项而非提示选项）：

// 示例：数据加载完成后设置初始值
this.unitMeasurementService.getData().subscribe(data => {
  this.unitMeasurements = data;
  this.addForm.patchValue({ unit_measurement: data[0] });
});

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