如何在具有 null 值的 Angular 选择元素上使用默认的“请选择”选项进行验证？

Posted 2023-02-22

【中文标题】如何在具有 null 值的 Angular 选择元素上使用默认的“请选择”选项进行验证？

【英文标题】：How to have a default "please select" option on an Angular select element with a null value for validation?

【发布时间】：2018-02-09 02:53:43

【问题描述】：

我在 Angular ngFor 循环中有一个选择 html 元素：

<select formControlName="type" required>
  <option *ngFor="let type of typeList" [ngValue]="type.value"> type.caption </option>
</select>

在 Internet Explorer 中，加载模板时会选择列表中的第一项，但它的值未在表单控件中设置，因此会导致“必需”验证错误，直到在列表中选择另一个值。我想要一个具有空值的“请选择”选项以防止这种情况发生。

这适用于使用或不使用 TypeScript 的 Angular 2+

【参考方案1】：

如果您不使用ngForm，实现所选值的另一种方法是在select 标记中执行类似[value]='selectedType' (change)='selectedType = $event.target.value' 的操作。例如： 在您的 component.ts 中：

public selectedType: string;

在你的component.html中

<select [value]='selectedType' (change)='selectedType = $event.target.value'>
  <option value=''>-- Select your Type --</option>
  <option *ngFor="let type of typeList" [ngValue]="type.value"> type.caption </option>
</select>

【参考方案2】：

组件.ts

public selectedValue = 'None';

component.html:

    <div ">
        <label>Highlight</label>
        <select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
                <option value='None'>None</option>
                <option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">trunklist.SIPTRUNKNAME</option>
             </select>
    </div>

这是我的代码，请根据您的要求修改

【参考方案3】：

像这样添加一个选项：

   <option [ngValue]="null">Please select</option>

所以你的控件看起来像：

<select formControlName="type" required>
  <option [ngValue]="null">Please select</option>
  <option *ngFor="let type of typeList" [ngValue]="type.value"> type.caption </option>
</select>

这在 Angular 检查 value 属性时起作用，因为方括号。该值变成了一个真正的空值，这与我们使用 value="" 不同（这只是一个空字符串并且不匹配空值）。