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

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

1 个答案: