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 .

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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