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

Question

我有一个选择的反应形式

<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，因为我需要进行必要的验证，如果未选择，则需要空白值。

Answer 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>