Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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
}
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!