如何在 Angular 8 中的选择标签上设置占位符？答案

【问题标题】：How to Set Placeholder on Select Tag in Angular 8?如何在 Angular 8 中的选择标签上设置占位符？
【发布时间】：2019-12-23 05:58:55
【问题描述】：

我正在创建一个下拉列表来过滤数据，所以我创建了一个下拉列表

<form  #filter="ngForm" (ngSubmit)="filterta(filter)" style="display: flex;">
       <select  ngModel #month="ngModel" name="month" required  >
                <option [ngValue]="null" [disabled]="true" >All</option>
                <option value="1">January</option>
       </select>
</form>

当我从选择标签中删除 ngModel #month="ngModel" 这些属性时，它会显示占位符选项 All，当我添加这些属性时，它会在占位符中显示空白。

【问题讨论】：

标签： angular select angular8

【解决方案1】：

这在 Angular-10 中对我有用。

<select class="form-control" name="role" id="role" formControlName="role">
     <option value="" disabled selected>Select the role</option>
     <option *ngFor="let role of roleList" value="{{ role }}">{{role}}</option>
</select>

【讨论】：

【解决方案2】：

在component.ts中设置month = null的初始值，并在component.html的select标签中添加[(ngModel)]="month"。

component.ts

month = null;

component.html

<form  #filter="ngForm" (ngSubmit)="filterta(filter)" style="display: flex;">
       <select name="month" [(ngModel)]="month" #month required>
                <option [ngValue]="null" [disabled]="true" >All</option>
                <option value="1">January</option>
       </select>
</form>

【讨论】：

我必须为 for 循环内的动态下拉场景执行此操作，并且设置为 null 对我来说不可行。我尝试了 [ngValue]="undefined" [disabled]="true" 并且它在我的情况下有效，因为默认情况下空对象未定义。
你可以用disabled代替[disabled]="true"

【解决方案3】：

试试这样：

修改ngModel #month="ngModel"为[(ngModel)]="selectedMonth" #month
在.ts文件中，添加selectedMonth = null;

.ts

selectedMonth = null;

.html

<form  #filter="ngForm" (ngSubmit)="filterta(filter)" style="display: flex;">
       <select  [(ngModel)]="selectedMonth" #month name="month" required  >
                <option [ngValue]="null" [disabled]="true" >All</option>
                <option value="1">January</option>
       </select>
</form>

Working Demo

【讨论】：

【解决方案4】：

你需要稍微修改一下你的代码

html文件

[(ngModel)]="month" // This will set month value for select tag

在ts文件中

将月份值设置为任何你想要的默认值

month = null;

工作代码

https://stackblitz.com/edit/angular-plwvgg

【讨论】：

【解决方案5】：

<select id="district" class="form-control">
  <!-- <option [disabled]="true">Select District/City</option> -->
  <option hidden value="" disabled selected>Select District/City</option>
  <option *ngFor="let postoffice of filterPostOffice" [value]="postoffice.District">
    {{ postoffice.District }}
  </option>
</select>

Placeholder in Select

【讨论】：

【解决方案6】：

这对我来说很好用：

<option value="" disabled selected>Text to display</option>

【讨论】：

【解决方案7】：

在 Angular 中，您要充当占位符的选项设置 value="undefined" 并将其放在最顶部，如下所示：

<select
  id="fmonthsCommitment"
  name="support"
  class="inp-si"
  (click)="commitmentNotification()"
  [(ngModel)]="commitmentInMonthsInput"
>
  <option value="undefined" disabled selected>
    Choose Months Commitment...
  </option>
  <option value="3">3</option>
  <option value="6">6</option>
  <option value="12">12</option>
  <option value="24">24</option>
</select>

【讨论】：