I want to show Select Gender as placeholder in my select tag

Question

Hi my requirement is to show Select Gender as placeholder in my select tag page.html

<div class="form-group">
  <select placeholder="Select Gender" name="Sgender" [(ngModel)]="gender" class="form-control" #genders="ngModel" required>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
  </select>
  <div *ngIf="genders.invalid && (genders.dirty || genders.touched)" class="alert alert-danger">
    <div *ngIf="genders.errors.required">
      Please Enter Gender
    </div>
  </div>
</div>

this is my code whenever I use ngModel in it, It doesn't show the text as a placeholder. Please help me with your valuable suggestions. Thank you for your help

I don't think this is specific to Angular; if you want a placeholder, you have to add it as initial option, I guess. — , Jan 16 '20 at 11:41
`select` elements don't have placeholders. You would need to do something like this: https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box — Turnip, Jan 16 '20 at 11:41
Make the first select option disabled and selected by default and put your placeholder in it. — amanagg1204, Jan 16 '20 at 11:44
Does this answer your question? [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — , Jan 16 '20 at 11:45
*sigh* https://medium.com/@malpinder/falsehoods-programmers-believe-about-gender-cf1a55085ab2 — Quentin, Jan 16 '20 at 11:56
I know this is about a select field, but I would suggest you also read the article @Quentin posted and consider making this an open text field. — disinfor, Jan 16 '20 at 12:19

score 0 · Accepted Answer · answered Jan 17 '20 at 14:21

Acccording to the SO tags you're using Ionic 4, so you could use the ion-select component instead which provides a placeholder property:

<ion-select placeholder="Select Gender">
  <ion-option>Male</ion-option>
  <ion-option>Female</ion-option>
</ion-select>

(Note that the label becomes the value if no value attribute is provided)

I want to show Select Gender as placeholder in my select tag

1 Answers1