Ionic 3 how to edit ion-selectable fields

Ionic Framework ionic-v3
1

I want to edit the ion-selectable fields .i have country ,state ,city fields and those are linked to each other.i am not able to set the the data in three columns because those fields are in onChange . Any one solve the issue that will helps me a-lot.

<ion-item>
    <ion-label>Country</ion-label>
    <ionic-selectable 
    item-content 
    [(ngModel)]="country"
    formControlName="country" 
    [items]="countries"
    itemValueField="clg_country_id" 
    itemTextField="clg_country_name" 
    [canSearch]="true" 
    (onChange)="countryChange($event)"
    >
    </ionic-selectable>
  </ion-item>

  <ion-item>
    <ion-label>State</ion-label>
    <ionic-selectable 
    item-content 
    [(ngModel)]="state"
    formControlName="state" 
    [items]="states"
    itemValueField="clg_state_id" 
    itemTextField="clg_state_name" 
    [canSearch]="true" 
    (onChange)="stateChange($event)"
    selected="true">
    </ionic-selectable>
  </ion-item>

  <ion-item>
    <ion-label>College</ion-label>
    <ionic-selectable 
    item-content 
    formControlName="college" 
    [items]="colleges"
    itemValueField="clg_id" 
    itemTextField="clg_name" 
    [canSearch]="true" 
    (onChange)="collegeChange($event)"
    selected="true">
    </ionic-selectable>
  </ion-item>

tsfile

loadCountries(){
this.Service.getCountries()
.subscribe((data)=>{
  this.countries=data.countries
 })
}

countryChange(event: {
component: IonicSelectableComponent,
value: any 
}) {

this.Service.getStates(event.value.clg_country_id)
.subscribe((data)=>{
  this.states=data.states;
  this.state=this.states[2]
})
}

stateChange(event:{
component:IonicSelectableComponent,
value:any
}){

this.Service.getColleges(event.value.clg_state_id)
.subscribe((data)=>{
  this.colleges=data.colleges;
})
}

collegeChange(event:{
component:IonicSelectableComponent,
value:any
}){
}
2

pass here actual ngmodel data
(onChange)="countryChange(country)"

(onChange)="stateChange(state)"

countryChange(country) {
here call your service get the state by country and pass the country argument
}

stateChange(state) {
here call your service get the city by state and pass the state argument
}

3

thanks for your reply , will you please give me any example

4

Already told you what you have to do you dont need event.value and all just pass the ngModel data to onChange and trigger the state subscribe thats it

5

thank you i will try that…

6

@ indraraj26
your solution works perfect for onChange event ,but again i’m struggling with onSearch event. How to display intial text in onSerch event .

7

if you are talking about default data on country, state and city which should display when you are editing form. Actually it should bind default data as ngModel is a two way binding. Apart from this then please explain what are you trying to achieve.

8

in my ts file:-
export class countryCredentials{
public id:any;
public label:any;
}
country:countryCredentials;
countries:countryCredentials;

loadCountry(event: {
component: IonicSelectableComponent,
text: string
}) {
return this.Service.getCountry(event.text).subscribe(ports=>{
event.component.items=ports;
this.countries=ports;
})
}

in html page:-

 <ion-item>
    <ion-label>Countries</ion-label>
    <ionic-selectable
      item-content
      [(ngModel)]="country"
      itemValueField="id"
      itemTextField="label"
      [items]="countries"
      [canSearch]="true"
      (onSearch)="loadcountry($event)"
      formControlName="country">
    </ionic-selectable>
  </ion-item>

In above code i am not able to set initial value because the countries will load only when i enter any letter . i want to set initial value in the above code

9

so basically you want default value of country should be display on form like INDIA

10

yes, If i set the default value only that value is coming , and not able to search when a letter types.

11

so remove this (onSearch)=“loadcountry($event)”

execute loadcountry() without argument in ionViewDidLoad()
get the country list from your service then bind that data to your array, you will get list of all country in one array countryList:any = [];
now you want INDIA from that array use ForEach/Filter and get your value assign to your ngModel

countryList.forEach((element) => { 
    if(element.name = "India") {
   this.country = element.name; //now the default value of your ion selectable will be india
}
}

this all should be in your ionViewDidLoad

Edit:
also on ion-selectable you have to add (onChange)=“state(country)” this you have to add in order to trigger state and get the state from country that you selected.

12

in (onChange) event your solution solves my problem yesterday but i am facing issue on onSearch and i will try that solution which you gave me just now.Thanks for you help…

13

Try my above approach as i told you in above & comments all of your code. Note: you dont need onSearch for this.