代码之家 › 专栏 › 技术社区 › Alfa Bravo

使用[ngvalue]时,角度选择元素会释放默认值

angular

0

Alfa Bravo · 技术社区 · 7 年前

我选择了动态加载反应式表单的组件

选择默认值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 是下拉列表中的第一个值

到目前为止,我所做的一切都没有奏效。

1 回复 | 直到 7 年前

1

0

Teddy Sterne 7 年前

您需要用空字符串初始化FormControl,然后一切都应按预期工作。问题是 formControl 具有一定的价值 null 但是placeholder选项的值为空字符串

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

或者,可以用空值绑定占位符的值,该值也可以按预期工作。

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

Demo