Generated <ion-selected-option>'s value taking priority over <ion-select>'s placeholder

Question

My problem is (apparently) simple. This is the result I would like to achieve :

I manage to get this result with the following code (home.page.html) :

<ion-item>
  <ion-label position="floating" color="primary">Type</ion-label>
  <ion-select formControlName="type" placeholder="Insert your type here...">
  </ion-select>
</ion-item>

Now, when I add some ion-selected-option for this ion-select, like this :

<ion-item>
  <ion-label position="floating" color="primary">Type</ion-label>
  <ion-select formControlName="type" placeholder="Insert your type here...">
    <ion-select-option *ngFor="let type of types" [value]="type">{{type}}</ion-select-option>
  </ion-select>
</ion-item>

the placeholder is replaced by the value of the first ion-selected-option when the page loads.

The values of these ion-selected-option are declared in the constructor of my home.page.ts like such :

constructor(public formBuilder: FormBuilder){
    this.types = [
      "Advert",
      "OOH/POS simple",
      "OOH/POS complex",
      "Other"
    ];
  }

Lowgic Lowgic · Accepted Answer · 2020-03-28T20:23:02

I found the answer by looking in my formBuilder in home.page.ts, the line that caused this behavior was as follows:

 this.validations_form = this.formBuilder.group({
 ...
 type: new FormControl(this.types[0], Validators.required),
 ...
 })

So I replaced it by :

 type: new FormControl('', Validators.required),

And so, I found back the placeholder.

Generated <ion-selected-option>'s value taking priority over <ion-select>'s placeholder

1 Answers