How to set default selected value of ion-option?

Perrier picture Perrier · Dec 14, 2016 · Viewed 78.6k times · Source

I'm using Ionic v2 and I can not set the selected value when showing the page.

<ion-select [(ngModel)]="company.form">
    <ion-option *ngFor="let form of forms" [value]="form" [selected]="true">{{form.name}}</ion-option>
</ion-select>

I've tried with checked, too but that isn't work either. How can I do this?

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45

Answer

Perrier picture Perrier · Dec 15, 2016

The problem seems to be that ion-option don't like objects in rc3. I have to work with only the id part of the object and write a seperate changehandler that find the needed object and set it as a value.

  <ion-select [ngModel]="company.form.id" (ngModelChange)="companyFormSelected($event)" okText="Ok" cancelText="Mégsem">
    <ion-option *ngFor="let form of forms" [value]="form.id" [selected]="form.id == company.form.id">{{form.name}}</ion-option>
  </ion-select>

And the changehandler:

companyFormSelected(newform) {
    let selectedForm = this.forms.find((f)=>{
      return f.id === newform;
    });
    this.company.form=selectedForm;
}

This seems to be a bug in rc3 but I don't know where can I report bugs. I did open a topic on ionic forum.