Ionic 4 ion-select pre select value

#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>
#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>
1 Like
#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>
1 Like
#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;
    }
  }
}