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

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 time1578×865 59.7 KB

REENTRY A:

reentry A1572×620 61.7 KB

REENTRY B:

reentry B451×839 35.3 KB

REENTRY C:

reentry C1559×858 70.9 KB

3 posts - 2 participants

Read full topic