Ion-selected doesn't show the selected option

Ionic Framework ionic-v3
1

Using model driven form to select default option, so residence is already set:

<ion-select formControlName="residence">
   <ion-option [value]='"0"'>{{freeCalcForm.controls.partyAName.value}}</ion-option>
   <ion-option [value]='"1"'>{{freeCalcForm.controls.partyBName.value}}</ion-option>
</ion-select>

I don’t see the selected value:
image
But clicking on the ion-select shows that the value is already selected correctly:
image

I tried selected=“true” and selected=“selected” on first option without any effect.

2

Are you absolutely certain that the residence control has its initial value set to “Self” by the time the template accesses it (by which I pretty much mean “in the component constructor”)?

3

Not so “Self” but to “0”. Yes it is set. Setting it to “1” successfully sets the Spouse as the default in the dropdown, with same issue of not showing it before clicking the select.

4

Is it possible that the double quotes are screwing things up? I still don’t really understand JavaScript’s type conversions.

IOW, does changing [value]='"0"' to value="0" change anything?

5

I already tried that. Same thing. Dropdown select is selected, but not shown.

6

Can you work backwards from this example (it works for me in a scratch testbed)?

form: FormGroup;

  constructor(fb: FormBuilder) {
    this.form = fb.group({
      fruit: ["banana"],
    });
  }

  <form [formGroup]="form">
    <ion-select formControlName="fruit">
      <ion-option value="apple">apple</ion-option>
      <ion-option value="banana">banana</ion-option>
      <ion-option value="cherimoya">cherimoya</ion-option>
    </ion-select>
  </form>

“banana” is selected as expected.

2 Likes
7

its due to interpolation {{}} in the ion-option text…what a bummer…
this works just fine:

 <ion-select formControlName="residence">
              <ion-option value='0'>0</ion-option>
              <ion-option value='1'>1</ion-option>
  </ion-select>
2 Likes
8

Ah. It’s probably actually due to the way you’re referencing controls directly. That breaks. Instead try this:

{{freeCalcForm.get('partyAName').value}}

9

Same probelm with this:

         <ion-select formControlName="residence">
          <ion-option value='0'>{{freeCalcForm.get('partyAName').value}}</ion-option>
          <ion-option value='1'>{{freeCalcForm.get('partyBName').value}}</ion-option>
        </ion-select>
10

I think you have hit #8561.

11

Ran today in the exact same issue :frowning:
The workaround in #8561 from 3dd13 didn’t work for me either.

12

Might be a little late to the game here, but ran into this issue today as well and I have come up with a workaround albeit not for all situations.

If in your TS file, you can push the options you want to an array variable, you can access them via interpolation and it adds to the form builder upon submission.

something like this in your TS
(for loop here)
this.testArray.push(data[i]);

in your HTML
<ion-option *ngFor="let item of testArray; let i = index " value="{{item}}" selected="i === 0">{{item}}</ion-option>

simple solution but requires a little extra legwork. Frustrating that it doesnt work like expected.

13

You solution worked perfectly for me after 2 days of struggle. Thank You!

14

Wao thank you so much. This answered my question about ion-select with formBuilder approach. now i do array.map() in the form init for the auto select of values present in the options. :pray::raised_hands:

15

I simply reset the values again in on the form object…
async ionViewDidLoad(){
await this.init();
this.userDetailsForm.controls[‘institution’].setValue(this.institution);
this.userDetailsForm.controls[‘campus’].setValue(this.firstTimeCampus);
this.userDetailsForm.controls[‘college’].setValue(this.firstTimeCollege);
this.userDetailsForm.controls[‘department’].setValue(this.firstTimeDepartment);
this.userDetailsForm.controls[‘userStatus’].setValue(this.userStatus);
this.userDetailsForm.controls[‘userType’].setValue(this.userType);
this.userDetailsForm.controls[‘role’].setValue(this.role);
}

This solution is working for me…

16

This gave me the inspiration for my solution. Thanks!

The problem (I think) is that Ionic automatically decides what option to mark as selected only if the option’s value matches what you interpolate. Which is why @tenonic 's final solution worked.

With your solution, you manually decide when each option is selected. So if you don’t want to, you don’t have to put your options in an Array and loop for this to work. Say you have:

<ion-select [(ngModel)]="employment" placeholder="Are you employed?">
   <ion-option value="self-employed">Yes, I work for myself</ion-option>
   <ion-option value="employed">Yes, I work for a company</ion-option>
   <ion-option value="student">No, I'm a student</ion-option>
</ion-select>

By default, when you select any of these options, you won’t see your selected value, but once you do this, you should be good:

<ion-select [(ngModel)]="employment" placeholder="Are you employed?">
   <ion-option value="self-employed" selected="employment === 'self-employed'">Yes, I work for myself</ion-option>
   <ion-option value="employed" selected="employment === 'employed'">Yes, I work for a company</ion-option>
   <ion-option value="student" selected="employment === 'student'">No, I'm a student</ion-option>
</ion-select>

Cheers!

17

Adding timeout worked for me

setTimeout(_ => {
      this.form.controls.email_preference.setValue("Daily");
 })
2 Likes
18

Super embarassing answer: in one case everything worked correctly - but my css was making the text the same color as the background. Hate when that happens.

19

Had the same issue, answered on this issue https://github.com/ionic-team/ionic/issues/8561#issuecomment-391079689

20

I could workaround this using the compareWith attribute.

in the template :

[compareWith]="compareFn.bind(this)"

and on ts :

compareFn(c1: any, c2: any): boolean {
        return c1 && c2 ? c1.id === c2.id : c1 === c2;
    }

hope it helps