How to set default selected value of ion-option?

Question

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

Site

Try this: this.company.form = this.forms[0] in your component.ts – Derward

Answer 1

If you deal with default value xor objects, the cleanest way is to provide a compare function to the [compareWith] attribute. This function takes 2 objects in parameters and returns true if they are equals. This way, existing values in model will be selected at start. This works too if new data are added in model outside of the select.

Following example is taken from official Ionic doc

<ion-item>
  <ion-label>Employee</ion-label>
  <ion-select [(ngModel)]="employee" [compareWith]="compareFn">
    <ion-option *ngFor="let employee of employees" [value]="employee"></ion-option>
  </ion-select>
</ion-item>

compareFn(e1: Employee, e2: Employee): boolean {
  return e1 && e2 ? e1.id == e2.id : e1 == e2;
}

EDIT : using double equals make it work for Ionic 4 (as Stan Kurdziel suggests in comment)

Spoor

I think this should be the accepted answer. It's cleaner, more straight forward and the official ionic suggestion - ionicframework.com/docs/api/components/select/Select/… – Towboat

Thanks! the binding worked fine for me without [compareWith] in Ionic 3 (not even using objects, just numbers for the values), but quit working in Ionic 4... Adding compareWith AND using only double equals instead of triple equals fixed Ionic 4 for me. – Stavropol

This doesn't work in newer version of ionic. Any change in the selected value isn't reflected. – Mossbunker

@Mossbunker replace triple equals with double as it seems Ionic 4 mix string & int values – Spoor

Answer 2

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.

Site

Answer 3

<ion-select [(ngModel)]="name">// binding the value available from ts file
    <ion-option *ngFor="let form of forms; let idx = index" [value]="form.name"  selected="{{(idx==0).toString()}}">{{form.name}}</ion-option>
</ion-select>

inside your ts file

name = this.forms[0].name //assign the variable name to the first index of your array

Laylalayman

Will this work? It seems you are now binding ngModel on the select to a string, but the option values are all objects. – Antoneantonella

Okay, at least it showed that this ion-option thing in rc3 actually can show a default value. However the solution is not to use objects in it and index doesn't have to be involved either. Thanks for your time @MohanGopi – Site

Answer 4

This is working for me.

In html :

<ion-select [(ngModel)]="company.form">
    <ion-option value="frm1"> Form 1 </ion-option>
    <ion-option value="frm2"> Form 2 </ion-option>
</ion-select>

In ts :

company = {
   form:null
}; 

constructor(){
   this.company.form = "frm1";
}

Fortyniner

Yes this works, but what if the selections are objects? – Reprehension

Answer 5

<ion-select ([ngModel])="dropdown1">
  <ion-select-option value="1">Item1</ion-select-option>
  <ion-select-option value="2">Item2</ion-select-option>
</ion-select>

the following will not work:

dropdown1 = 2;

but the following will work:

dropdown1 = 2 + "";

The select option values are treated as string, so you should assign string values to your model variable so that comparison will not fail.

Janeth

Today, this resolved my troubles after all other suggestions failed...! – Dim

Answer 6

You do not need to work with the attribute selected or [selected] it is not necessary

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

Genovevagenre

As far as I know this was a bug in ionic v2 rc-3 and was fixed in the final release. I suppose your solution is working now, looks the way it should work and my solution was a workaround for the bug in rc-3. So for future reference I set your answer as the best solution for my original question. Thanks for your answer! – Site

if I initialize company.form.id=2, it shouldn't visually appear that option selected? It's not happening and don't know why... – Abagail

Answer 7

To make long story short, and quoting ionic documentation (always reference the original source ): "A select should be used with child elements. If the child is not given a value attribute then its text will be used as the value. If value is set on the , the selected option will be chosen based on that value."

...hence....make sure value attributes on your ionic-select and ionic-select-option reference the same javascript object.attribute in your code...basically point to the same thing..see below page level attribute value="{{ country.id }}" in both ionic-select and array level value="{{c.id}}" ionic-select-option

Please notice that ngModel is no longer managing the page level country attribute lifecycle

    <ion-item>
        <ion-select *ngIf="countries.length > 0"
                     (ionChange)="onCountryChaged($event)"
                     interface="popover"
                      clearInput="true"
                      placeholder='Country (required)'
                       value="{{ country.id }}">
            <ion-select-option lines="none"
              *ngFor="let c of countries"
               value="{{ c.id }}"> {{ c.label }}
            </ion-select-option>
        </ion-select>
     </ion-item>
        
        
Inside the .ts file we can now set *country* member programmatically
Page:constructor();
    this.platform.ready().then(async () => {
        this.getCountries(); //load list of countries from provider
        this.country = this.navDataService.getCountry();//local data store to save state between pages
        }).catch(error => { });
        
Page:EventHandler onCountryChaged(event): void {
     
    let id = event.detail.value;
    this.country = this.countries.find( item => item.id == id ) ;
    this.navDataService.setCountry(this.country);
}
            
     

Mitziemitzl

Kinda wish I could upvote this answer more than once for the insight it provides. The tip about making sure that the values in ion-select and ion-select-option match just saved my current branch. – Unequaled

Answer 8

Inside ion-option, you can do

<ion-option [attr.selected]="(form.name == name) ? true : null"> {{ form.name }} </ion-option>

Litigate

Didn't work. Tried with [attr.checked], too but that didn't do it either. Do you use the same ionic version and this works for you? – Site

Answer 9

  in html---->

     <ion-item text-center >
        <ion-select  [(ngModel)]="selectedQuestion" placeholder="Choose Security Question" >
          <ion-option *ngFor="let q of questionArray let i=index"  selected="{{(i==defaultSelectQuestion).toString()}}"  >
             {{q}}
            </ion-option>
        </ion-select>
      </ion-item>


in ts---->
//if u dont want any default selection
    this.defaultSelectQuestion = -1; 

//if first element should be your default selection
  this.defaultSelectQuestion = 0;



this.selectedQuestion=this.questionArray[this.defaultSelectQuestion]

Detradetract

Answer 10

Angular Solution :

html :

<form [formGroup]="formName">
    <ion-item>
        <ion-select label="Label" label-placement="floating" formControlName="formControleName" [value]="" >
            <ion-select-option *ngFor="let value of values" [value]="value">
              {{ item}}
            </ion-select-option>
        </ion-select>
    </ion-item>
</form>

ts:

let values       = ["value1", "value2", "value3"]
let defaultVlaue = "value2"    

this.formName = new FormGroup(
    {
      formControleName: new FormControl(defaultvalue, [Validators.required])
    }
  )

Pushup