如何处理 Angular 5 select 绑定到空值

Question

我有一个 select

的反应形式

<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--”不会被 select 编辑，而是会在其上方出现一个额外的空白选项。

我试过的。

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

和

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

但这给出了与“--Select--”相同的结果，而不是 selected

我不想将硬编码数值设置为固定数字，例如-1 因为我需要启动所需的验证，如果不是 selected.

，则需要一个空白值

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>

如何处理 Angular 5 select 绑定到空值

How to handle Angular 5 select binding to a null value

angular-forms

angular5