Question

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

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

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

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

Answer 1

添加如下选项：

   <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属性，因为方括号。该值变为真正的null，不像我们使用value =＆＃34;＆＃34; （这只是一个空字符串，并不匹配null）。

Answer 2

component.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>

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

Answer 3

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

在您的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>

如何设置默认值＆＃34;请选择＆＃34;一个Angular select元素的选项，用于验证的空值？

3 个答案: