使用 [ngValue] 时，角度选择元素会丢失默认值

Question

我有选择的组件可以通过反应表单动态加载

选择默认值 100% 像这样工作：

<div class="selectComponent" [formGroup]="group">
    <label>{{ config.label }}</label>
    <select [formControlName]="config.name">
        <option value="">{{ config.placeholder }}</option>
        <option *ngFor="let option of config.options">
            {{ option.name }}
        </option>
    </select>
</div>

但后来我意识到，即使我希望 option.name 显示在下拉列表中，我也想要一个与 option.id 这样的名称不同的值

所以我将代码更改为：

<div class="selectComponent" [formGroup]="group">
    <label>{{ config.label }}</label>
    <select [formControlName]="config.name">
        <option value="">{{ config.placeholder }}</option>
        <option *ngFor="let option of config.options" [ngValue]="option.optionid">
            {{ option.name }}
        </option>
    </select>
</div>

但现在默认值没有了，框只是空的，即使选项值config.placeholder是下拉列表中的第一个值

到目前为止，我尝试过的任何方法都没有奏效。

Answer 1

您需要使用空字符串初始化 formControl，然后一切都应该按预期工作。问题是formControl 的值为null 但占位符选项的值为空字符串

group = new FormGroup({
 configuredControlName: new FormControl(""),
});

或者，您可以将占位符的值与 null 值绑定，它也可以按预期工作。

<option [value]="null">{{ config.placeholder }}</option>

Demo