Ionic 4: How to update or refresh a ion-select from script? - ionic-framework

Question

I created an app with a register form in ionic 4 and angular. I want to do the following:
I have two ion-selects, one is for a countries list and that another is for phone codes list. The behavior i am looking for is: when a country is selected in the ion-select for countries, the corresponding telephone code must be selected automatically in the phone code ion-select.
This is my code:
ion-select for countries
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event)" interface="popover">
<ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
</ion-select>
ion-select for phone code
<ion-select formControlName="phonecode" placeholder="Cod." interface="popover">
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
</ion-select>
Here is the function i am using to update the phone code ion-select
changeselect($event){
console.log($event.target.value) ;
let item1 = this.countries.find(i => i.cod === $event.target.value);
console.log(item1) ;
this.codigoselected = item1.code;
console.log(this.codigoselected) ;
}
I am using the variable "codigoselected" to determine which country is selected. for this, in the ion-select-option i am using a condition to change the selected status of the option like this:
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
The current behavior is like this:
I selected a country:
But the ion-select for phone codes seems not to be updated
But when I click on the field, the specific code is selected
I need to do clic under option is selected in order to field be refreshed:
So, how can I make the field for phone codes update automatically in the interface without the user clicking?

Answer 1

Try this, pass the phone code select element to your changeselect(event, phoneCodeSelect) function.
<ion-select id="paisselect" formControlName="pais" (ionChange)="changeselect($event, phoneCodeSelect)" interface="popover">
<ion-select-option *ngFor="let c of countries" value="{{c.cod}}">{{c.name}}</ion-select-option>
</ion-select>
Add #phoneCodeSelect to your phone code select element.
<ion-select #phoneCodeSelect formControlName="phonecode" placeholder="Cod." interface="popover">
<ion-select-option *ngFor="let c of codetele" value="{{c.code}}" selected="{{codigoselected == c.code}}">{{c.code}}</ion-select-option>
</ion-select>
Then in your function change the value of the select element manually, while also updating the phoneCode form control value.
changeselect($event, phoneCodeSelect){
console.log($event.target.value) ;
let item1 = this.countries.find(i => i.cod === $event.target.value);
console.log(item1) ;
this.yourFormGroup.value.phonecode = item1.code; // change yourFormGroup to what your variable's name is
phoneCodeSelect.value = item1.code;
}