How to Set Placeholder on Select Tag in Angular 8?

Question

I am creating a dropdown to filter data so I have created a dropdown

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

when i remove ngModel #month="ngModel" these properties form select tag it shows placeholder option All and when i add these properties it shows Blank in Placeholder .

Transmundane

Answer 1

Set initial value of month = null in the component.ts and add [(ngModel)]="month" in the select tag of component.html.

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>

Heterosis

I had to do it for dynamic dropdowns scenario inside a for loop and setting to null was not feasible for me. I tried [ngValue]="undefined" [disabled]="true" and it worked in my case because the empty objects had undefined by default. – Mercurate

Instead of [disabled]="true" you can just use disabled – Debut

Answer 2

This worked for me in 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>

Pristine

Answer 3

This works for me when model doesn't have initial value

<select [(ngModel)]="myModel">
        <option [ngValue]="undefined" [disabled]="true">Choose Type</option>
        <option *ngFor="let type of typeList; let i = index;" [value]="type.value">{{type.label}}</option>
</select>

Goldengoldenberg

this solution worked after l searched for long – Kowatch

Answer 4

Try like this:

• Modify ngModel #month="ngModel" to [(ngModel)]="selectedMonth" #month
• In .ts file, add 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

Mezuzah

Answer 5

You need to change your code a little bit

html file

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

in ts file

Set month value to deafult value whatever you want like

month = null;

Working code

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

Phenomenon

Answer 6

This works fine for me

> <select [(ngModel)]="name">      
> <option value="" disabled selected hidden>Choose your number</option>   
> <option value="red">One</option>    
> <option value="green">Two</option>     
> <option value="black">Three</option> 
></select>

Tillo

Answer 7

<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

Quathlamba

value attribute should be a blank string if you want to make a particular option to default option. new FormControl(['']) component.html value attribute should be a blank string eg: value=''" – Mildredmildrid

Answer 8

This works fine for me:

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

Thrush

Answer 9

In Angular, the option you want to act as a placeholder set the value="undefined" and place it on the very top as below:

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

Kellum