如何处理 Angular 5 选择绑定到空值答案

【问题标题】：How to handle Angular 5 select binding to a null value如何处理 Angular 5 选择绑定到空值
【发布时间】：2018-02-01 19:22:10
【问题描述】：

我有一个带有选择的反应式表单

<select [(ngModel)]="user.positionId" name="positionId" class="custom-select form-control form-control-sm" required
        formControlName="positionId"
        [ngClass]="{
        'is-invalid': positionId.invalid && (positionId.dirty || positionId.touched),
        'is-valid': positionId.valid && (positionId.dirty || positionId.touched)
        }">         
    <option value="">--Select--</option>
    <option *ngFor="let position of user.positionSelectList" value="{{position.value}}">
        {{position.text}}
    </option>
</select>

它被传递的 positionId 是一个可以为空的数字

export class User{
    id: string;
    userName: string;
    positionId?: number;
}

当我将数字值作为 positionId 传递时，上述方法有效。

但是，当它传递一个空值时，默认选项“--Select--”未被选中，但其上方会出现一个额外的空白选项。

我尝试过的。

 <option value=null>--Select--</option>

和

 <option value=udefined>--Select--</option>

但这给出了“--Select--”未选择的相同结果

我不希望将硬编码数值设置为固定数字，例如-1，因为我需要进行必要的验证才能启动，如果未选中，则需要一个空白值。

【问题讨论】：

标签： angular5 angular-forms

【解决方案1】：

您是否尝试过使用ngValue？

<select [(ngModel)]="user.positionId" name="positionId" class="custom-select form-control form-control-sm" required
        formControlName="positionId"
        [ngClass]="{
        'is-invalid': positionId.invalid && (positionId.dirty || positionId.touched),
        'is-valid': positionId.valid && (positionId.dirty || positionId.touched)
        }">         
    <option [ngValue]="null">--Select--</option>
    <option *ngFor="let position of user.positionSelectList" value="{{position.value}}">
        {{position.text}}
    </option>
</select>

【讨论】：

混合模板驱动和反应式表单是不好的做法