Placeholder for Select dropdown not working

Issue

I have searched and try many of the solutions that have been given in this forums but I still can't seem to get my code to display the placeholder. enter image description here

I have use "" in the value, as well as disable and hidden, also as well as not creating a variable and just typing the phrase. Maybe I just need a new set of eyes to help me see what I may be missing.

here's the output enter image description here

I have try some of the top results when doing a search and they don't seem to work

*****update

so 3 out of the five work, the only thing I can think of is the array I'm using *ngFor... I think I read something about that... for the other two is the same code as above and fixed to the first answer but for some reason they placeholder wont work.

Solution

You can create an option with value set as undefined and disabled, so on first load, it will appear as a label, after that the user can select the correct value!

<form #f="ngForm" (ngSubmit)="save()">
  <select
    [(ngModel)]="selected"
    name="valueCheck"
    (change)="valueChange($event)"
  >
    <option [ngValue]="undefined" disabled>Choose...</option>
    <option
      *ngFor="let obj of stud"
      [ngValue]="obj.rnNo"
      [selected]="obj.rnNo == selected"
    >
      {{ obj.name }}
    </option>
  </select>
  <button type="submit">submit</button>
  <button (click)="clear()">clearValue</button>
</form>
<h3>{{ selected }}</h3>

ts

...
export class AppComponent {
    selected!: number;
...

stackblitz

Answered By - Naren Murali