How to set default value ion-select item?

Question

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

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:

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>

Possible dupe? https://stackoverflow.com/questions/41146350/how-to-set-default-selected-value-of-ion-option did you try: `this.placeId = local.storage.getItem('yourValue')` in your component? — mxr7350, Feb 09 '18 at 10:48
Thanks @mxr7350 for your replaying, I tried but didn't work. — Khaled Ramadan, Feb 09 '18 at 10:54
will the places array value change or its the same all the time — Mahesh Jadhav, Feb 09 '18 at 11:41
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, Feb 09 '18 at 11:44
Yes house stay the same index if an element is added to the list it will be added on the bottom @MaheshJadhav — Khaled Ramadan, Feb 09 '18 at 11:46
ok great the do one thing while saving to local-storage save its index value instead or if you want the full name save it with name and index and then while fetching from local-storage take its index value and then selected property will work — Mahesh Jadhav, Feb 09 '18 at 11:48
If i have the index how can i select the item from their index? Can u create an answer instead the comment please thanks — Khaled Ramadan, Feb 09 '18 at 11:51

score 2 · Answer 1 · edited Mar 19 '18 at 07:35

2

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"

edited Mar 19 '18 at 07:35

BlackBeard

10,246
7
52
62

answered Mar 19 '18 at 06:59

Ryle Cordovero

21
2

score 0 · Answer 2 · answered Feb 09 '18 at 12:05

0

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') // 
}

answered Feb 09 '18 at 12:05

Mahesh Jadhav

1,091
1
8
13

I tried you method doesn't work,, I tried to hard code it `[selected]="i==1"` – Khaled Ramadan Feb 09 '18 at 13:02
No error just the ion-select not selecting any think – Khaled Ramadan Feb 09 '18 at 13:03
and can you please check what are you getting inside selectedIndex is that a number or string – Mahesh Jadhav Feb 09 '18 at 13:04

Khaled Ramadan · Answer 3 · 2018-02-09T13:19:13.100

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

score 0 · Answer 4 · answered May 21 '20 at 21:22

0

Thanks

In ionic 4

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

answered May 21 '20 at 21:22

Roberto Carlos Latorre Letona

1

I dont follow.. Can you explain? – alexherm May 21 '20 at 23:12

How to set default value ion-select item?

4 Answers4