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传递时，上述方法有效。

然而，当它传递一个空值时，则默认选项为＆＃34; - 选择 - ＆＃34;未选中，但其上方会显示另一个空白选项。

我尝试了什么。

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

和

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

但是这给出了相同的结果＆＃34; - 选择 - ＆＃34;未选中

我不希望将硬编码的数字值设为固定数字，例如-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>

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

1 个答案: