How to set default value ion-select item?

3
votes

I need to set default value to ion-select item.

enter image description here

The ion-select above contain list of places, After choosing a place I save it into a localStorage.

What I need this localStorage be the default value of the ion-select,like this:

enter image description here

When the page is changed the ion-select return the placeHolder and no item is selected

CODE:

  <ion-item>
    <ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
      <ion-option class="text-input place-field" *ngFor="let place of places | async;let i = index" value="{{place.id}}"> 
        {{place.name}}
      </ion-option>
    </ion-select>
  </ion-item>
4
htmlangularionic2
Possible dupe? stackoverflow.com/questions/41146350/… did you try: this.placeId = local.storage.getItem('yourValue') in your component? - mxr7350
Thanks @mxr7350 for your replaying, I tried but didn't work. - Khaled Ramadan
will the places array value change or its the same all the time - Mahesh Jadhav
@MaheshJadhav changes, it is an observable list - Khaled Ramadan
so will the house index change next time we load the page or will the house always stay at example say index '0' or whatever it may everytime - Mahesh Jadhav

4 Answers

2
votes

I found a solution to that.. add a AbstractControl to your [(ngModel)].

example:
in yout TS file.. 

placeForm: FormGroup;
placeId: AbstractControl;

constructor(){
  this.placeForm.formBuilder.group({
   placeId: ['', Validators.required],
  });
  this.placeForm.get('placeId').setValue(place.id);
}

in your html just add this [(ngModel)]="placeForm.placeId"

0
votes

If you have the index value you can just fetch that from localstorage and when the page loads you can save it in a variable and then use it to bind to the selected property on ion-option:

html:

<ion-item>
  <ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
    <ion-option class="text-input place-field" *ngFor="let place of places | async;let i = index" [selected]="i == selectedIndex" value="{{place.id}}"> // the variable selected index will be a number and will select the item matching with the index from the array.
    {{place.name}}
    </ion-option>
  </ion-select>
</ion-item>

in ts:

selectedIndex: number;

constructor(){
  this.selectedIndex = localStorage.getItem('index') // 
}
0
votes

I solved

the ion-select have the two way data binding with placeId

<ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
  <ion-option class="text-input place-field" *ngFor="let place of places | async;" value="{{place.id}}"> 
    {{place.name}}
  </ion-option>
</ion-select>

After Selecting a place I saved the id of the selected place inside the local storage. Then on the ionViewDidLoad() I init the the variable this.placeId

this.placeId = localstorage.getItem('foo')

and it work properly.

My mistake: I was saving the name of the place in the localstorage and not the id of the place

0
votes

Thanks

In ionic 4

  ionViewDidEnter() {
    let parametros = this.navParams.get('parametros');
    this.cuentaBancaria.empresa._id = parametros.empresa;
    this.cuentaBancaria.moneda._id = parametros.moneda;
  }