在 Angular 响应式表单中， 的默认选中需通过 FormControl 初始化值实现，而非依赖 HTML 的 selected 属性；[ngValue] 与 value 混用、空字符串占位符、初始化为 undefined 均会导致默认选择失效。
在 angular 响应式表单中，`
Angular 响应式表单（Reactive Forms）中，
- unit_measurement 控件被初始化为 new FormControl(undefined)，而 undefined 不匹配任何
- 使用 [ngValue]="um" 时，选项值是对象（如 { id: 1, value: 'шт.' }），而你尝试用字符串 'Выберите ед. измерения' 调用 setValue()，类型不匹配，必然失败。
✅ 正确做法如下：
1. 初始化 FormControl 为期望的默认值（推荐）
假设 unitMeasurements 是一个对象数组：
unitMeasurements = [
{ id: 1, value: 'шт.' },
{ id: 2, value: 'кг' },
{ id: 3, value: 'л' }
];
则应在创建表单时，将 unit_measurement 初始化为第一个有效选项对象（而非 undefined 或字符串）：
addForm = new FormGroup({
name: new FormControl('', [Validators.required]),
quantity: new FormControl(0, [Validators.required, Validators.min(0)]),
unit_cost: new FormControl(0, [Validators.required, Validators.min(0)]),
unit_measurement: new FormControl(this.unitMeasurements[0], [Validators.required]) // ← 关键：传入对象
});
2. 模板中正确使用 ngValue
<select formcontrolname="unit_measurement" name="unit_measurement" id="unit_measurement"><!-- 占位提示项：仅显示，不可提交 --><option value="" disabled>{{ 'Выберите ед. измерения' | translate }}</option>
<!-- 循环渲染真实选项，使用 ngValue 绑定整个对象 --><option um of unitmeasurements>
{{ um.value }}
</option></select>
⚠️ 注意：
- 占位
- 所有可选
- 若需“无选中”状态，可初始化为 null，并添加 value="" 的空选项（但需后端/业务允许空值）。
3. 动态设置（备选方案）
若需在组件初始化后设置（如异步加载选项后），使用 patchValue() 或 setValue()：
ngOnInit() {
// 确保 unitMeasurements 已加载完成
this.addForm.get('unit_measurement')?.setValue(this.unitMeasurements[0]);
}
✅ setValue() 要求值类型与 ngValue 类型完全一致（对象 → 对象，字符串 → 字符串）；patchValue() 同理，但更宽松（适用于嵌套表单）。
❌ 常见错误总结
| 错误写法 | 问题 |
|---|---|
| new FormControl(undefined) | 控件值为 undefined，无法匹配任何 ngValue |
| null 不等于 undefined，且多数场景应避免 null 作为有效选项 | |
| value="{{um.value}}" 配合 [ngValue]="um" | 混淆 value（字符串）与 ngValue（任意类型），导致比较失败 |
| 占位项写成 | undefined 不是合法绑定值，可能引发运行时异常 |
? 最佳实践建议：
- 始终用 ngValue 绑定复杂值（对象/枚举），用 value 仅处理简单字符串；
- 占位提示项独立于数据源，用空 value="" + disabled，不参与表单值校验；
- 初始化 FormControl 时即赋予语义明确的默认值（如 unitMeasurements[0] 或 null），避免后续手动干预。
这样即可确保下拉框首次渲染时，第一个有效选项自动高亮并成为表单当前值。
