How to properly set the default value of an ion-select

Ionic Framework
1

Im a receiving a typical user profile data from the backend via the http module with angular.

When I first enter the profile page of the user, everything gets loaded correctly but if i navigate to another page and come back the ion-select field (in this case the user’s country) is getting its default value set( with .setValue() function after receiving the user profile), but in the template it appears blank and gets populated only when clicking it. Beside this, I have a floating label that gets over the selected option after clicking it.

Here is part of the code of the profile page:

PROFILE.PAGE.HTML:

<ion-label position="floating">Country*</ion-label>
<ion-select (click)="assetSrv.loadCountryFlags(true)" formControlName="country" #country>
  <ion-select-option *ngFor="let country of countries" [value]="country.alpha2">
	{{country.name}}
  </ion-select-option>
</ion-select>

PROFILE.PAGE.TS:

ngOnInit() {
	this.userSrv.currentUserProfile.subscribe(profile => {
	  console.log('user profile: ' , profile);
	  this.userProfile = profile;
	  this.loadProfile();
	});
}

setPersonalValues() {
	this.profileForm.get('firstName').setValue(this.userProfile.firstName);
	this.profileForm.get('lastName').setValue(this.userProfile.lastName);
	this.profileForm.get('country').setValue(this.userProfile.country);
	console.log(this.profileForm);
}

What could I be doing wrong?

Please check images when first entering the page and after the first time:

FIRST TIME:

first time
first time1578×865 59.7 KB

REENTRY A:

reentry A
reentry A1572×620 61.7 KB

REENTRY B:

reentry B
reentry B451×839 35.3 KB

REENTRY C:

reentry C
reentry C1559×858 70.9 KB

2

If you would like to try an experiment, I posted code here in a similar thread. See if it behaves as you expect, and if it does, perhaps it will provide a point of reference for figuring out what is different with your code.

EDIT: also check out issue 19324.

1 Like
3

thanks I just added *ngIf = “countries && countries.length” to the <ion-select> and it works! Hopefully they update the select.tsx file which I believe is where the problem is happening to fix this minor bug.