Ionic 4 ion-select pre select value

Ionic Framework
1

I have an ion-select that the selected value is coming from a sqlite database, meaning the value for [(ngModel)] is being populated async. In ionic v3 this would still work and would select the correct ion-option, with v4 it doesn’t. Is there any way to get this to work?

 <ion-select [(ngModel)]="selectedCodeValue" name="selectCode" multiple="false"
        (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>

In the above snippet the “selectedCodeValue” gets populated async from sqlite db.

2

I just double checked and it has nothing to do with async data load or not. Even when I used a hard coded variable it still didn’t show the selected value until I clicked on the select, that’s when the selected value is automatically selected.

As a workaround I put the value in the ion-select placeholder attribute. That worked but it feels like a hack

<ion-select [(ngModel)]="selectedCodeValue" name="selectCode" multiple="false" [placeholder]="selectedCodeValue ? selectedCodeValue : 'Tap to select..'"
        (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>
1 Like
3

Ok I finally got it to work. I was missing the selectedText attribute. Now it works as expected

<ion-select [(ngModel)]="selectedCodeValue" name="selectCode" 
  multiple="false" placeholder="Tap to select.." [selectedText]="selectedCodeValue"
  (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>
6 Likes
4

1 more thing that I noticed, putting it here if anyone runs into this issue.

When it’s a multiselect (multiple=true) and you set [selectedText]=“selectedCodeValue” it will display 1 long string instead of comma separated string. The way I avoid it is as follows

<ion-select [(ngModel)]="selectedCodeValue" name="selectCode" 
  multiple="true" placeholder="Tap to select.."
  [selectedText]="selectedCodeValue ? selectedCodeValue.toString() : selectedCodeValue"
  (ionChange)="codeSelected()" required >
        <ion-select-option *ngFor="let code of availableCodes" value="{{code.id}}">
          {{code.id}} -  {{code.description}}
        </ion-select-option>
  </ion-select>
4 Likes
5

set the value property of the ion-select to accomplish the ion-select-option being selected.

<ion-select [(ngModel)]=“selectedCodeValue” name=“selectCode” multiple=“true” placeholder=“Tap to select…” [value]=“selectedCodeValue” (ionChange)=“codeSelected()” required>
<ion-select-option *ngFor=“let code of availableCodes” value="{{code.id}}">
{{code.id}} - {{code.description}}

1 Like
7

Hope this helps
In html file:


<ion-content padding>
  Select one
    <ion-select name="category" [selectedText]="selectcategory" [(ngModel)]="selectcategory" (ionChange)="codeSelected()" >
        <ion-select-option value="1" >Category 1</ion-select-option>
        <ion-select-option value="2">Category 2</ion-select-option>
        <ion-select-option value="3">Category 3</ion-select-option>
        </ion-select>
        
</ion-content>

In ts file


export class TestcodePage implements OnInit {
  selectcategory:any;
  selectcategory1:any;
  constructor() {
    this.selectcategory="Category 2";
    //this.selectcategory=1;
  }

  ngOnInit() {
  }
  codeSelected(){
    switch(this.selectcategory)
    {
      case "1": 
      this.selectcategory="Category 1";
      break;
      case "2": 
      this.selectcategory="Category 2";
      break;
      case "3": 
      this.selectcategory="Category 3";
      break;
    }
  }
}
2 Likes
8

Tks brother i spended hours looking how to work arround with it. You rock…

9

Thanks man, it works.
The [selectedTex] seems to do the trick.
Thank you for saving me a lot of time.

10

Try this method it works.
Nationality

              <ion-select formControlName="nationality" [value]="nationalid" interface="action-sheet" (ionChange)="changeNationality()">

                <ion-select-option *ngFor="let nationality of nationalityList" [value]="nationality.id">

                  {{nationality.nationality}}</ion-select-option>

              </ion-select>
11

hey @javasol thanks for posting your solution. this works for showing the string but when I open the action sheet it actually doesn’t show the selected values as selected (I’m having a multiselect option and I expect to see that when I open it the fetched values are already selected)
PS: this used to work when I could use the select property of the IonSelectOption but in Ionic 5 they removed support for that property)

12

I am working with Ionic Vue but I think I have a similar problem.

is your selectedCodeValue an Object of the selected element(s) or a string of the selectedText or both? somehow I still have problems setting the value and I don’t understand how your model and selectedText can be the same. and I have the same problem as @sabahang

13

Check out my post over here. Using v-model in Vue fixed the issue in Ionic for selecting the tab.

14

Oh, lol, sorry. I totally read this wrong. You are working with ion-select and not ion-segment. But maybe using v-model will fix the issue here too?

15

thank you @twestrick for trying to help. yes in fact I am using v-model. the ion-select-options are all listed correctly and I can select them but I can’t get an initial value (a first pre selection) inside the ion-select. any trial with :value, :selected-text or other didn’t work

16

Hi. Unfortunately I haven’t touched Ionic in almost 2 years. Can’t really help you but maybe someone else here can