ion-select not showing selected option with FormBuilder (Ionic 3)

Question

Take the following html

  <form [formGroup]="detailsForm">

  <ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select formControlName="gaming">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
      <ion-option value="genesis">Sega Genesis</ion-option>
      <ion-option value="saturn">Sega Saturn</ion-option>
      <ion-option value="snes">SNES</ion-option>
    </ion-select>
  </ion-item>
  </ion-list>

  </form>

And in your component

this.detailsForm = this.formBuilder.group({
      gaming:['nes',Validators.required]
    });

I would expect to see 'NES' as the selected option when the view is loaded. However, it does not appear. If you instead use [(ngModel)] it will work.

Am I doing something wrong, or has the most recent ionic update caused this issue?

Any help would be great.

Answer 1

It's just an issue with 3.1. It's either a breaking change with passing the whole event vs. the value as it used to, or has something to do with firing ionChange when the component loads before user interaction (or the first thing is causing the second). Use 3.0 for now.

Answer 2

Here is how I solved this issue (as it is still happening in Ionic 3.5.0):

<ion-select class="form-select" 
            [selectOptions]="stateOptions"
            [(ngModel)]="state" 
            [ngModelOptions]="{standalone: true}"
            (ionChange)="stateChanged(state)" (click)="onSelectClicked()">
  <ion-option *ngFor="let state of states">{{state}}</ion-option>
</ion-select>

And the corresponding TypeScript:

public onSelectClicked (): void {
  const options: HTMLCollectionOf<Element> = document.getElementsByClassName('alert-tappable alert-radio')
  setTimeout(() => {
    let i: number = 0
    const len: number = options.length
    for (i; i < len; i++) {
      if ((options[i] as HTMLElement).attributes[3].nodeValue === 'true') { // This is the selected option
        options[i].scrollIntoView({block: 'end', behavior: 'smooth'})
      }
    }
  }, 500) // Leave enough time for the popup to render
}

Answer 3

I don't know if there is a way to do it with forms but I have been using a ng-model and it is working great.

Look at the code below:

<ion-list>
    <ion-item>
        <ion-label>Gaming</ion-label>
        <ion-select [(ngModel)]=gaming>
            <ion-option value="nes">NES</ion-option>
            <ion-option value="n64">Nintendo64</ion-option>
            <ion-option value="ps">PlayStation</ion-option>
            <ion-option value="genesis">Sega Genesis</ion-option>
            <ion-option value="saturn">Sega Saturn</ion-option>
            <ion-option value="snes">SNES</ion-option>
        </ion-select>
    </ion-item>
</ion-list>

and in the .ts file declare gaming to be a global variable by calling this before the constructor

public gaming: any;

and then insert the value

$scope.gaming=['nes'];

this should work fine.