Search code examples
javascripthtmlcssangular7ionic4

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

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

Solution

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

    screenshot