How to get to show the default value on form load with reactive form

Question

I've got many examples of this. Using FormGroup, Ion Select, the value is always set properly, but nothing shows until I manually open the select and close it. This behavior makes the Reactive Form totally useless for editing or updating, which effectively means it is useless. I don't have any form that doesn't need a select, and while it does work ok for inserting new values, it means I have built one form for inserting and another totally different form for updates.

I'll paste some code in here, but I'm sure everyone using Ionic 3 has seen the problem. When will it be fixed, and is there a workaround?

<ion-content>
  <div *ngIf="loginForm">
  <form [formGroup]="loginForm" (submit)="doLogin()">
    <ion-list>

      <ion-item *ngIf="lookupsProvider">
           <ion-label fixed>{{ 'PHONE_COUNTRY_CODE' | translate }}</ion-label>
           <ion-select type="input" name="country_id" formControlName="country_id">
               <ion-option *ngFor="let country of lookupsProvider.lookupData['countrys']"
                      value="{{ country['id'] }}">
                  <ion-item>
                   {{  this.optionText(country) }}
                  </ion-item>
               </ion-option>

           </ion-select>
      </ion-item>

.... other inputs of course

and in the .ts file

     _buildForm() {

     this.loginForm = this.formBuilder.group({
        country_id: [this.settingsProvider.settings['USER_ID'], Validators.required],
        main_phone: ['', Validators.required], 
        password: ['', Validators.required]
     });

     this.loginForm.valueChanges.subscribe((v) => {
        console.log('Login loginForm.valueChanges: ' + v);
     });
  }

As I mentioned, the values are set correctly, but all the user sees is a blank select... This is the login form, but we know the user's country, so we'd like them not to have to choose it. Because the value doesn't show, the user ends up having to select it to be sure it's set.

Possible duplicate of [How to set default selected value of ion-option?](https://stackoverflow.com/questions/41146350/how-to-set-default-selected-value-of-ion-option) — Yuvraj Patil, May 23 '18 at 06:18
@YuvrajPatil don't agree with this question being a duplicate. The question you linked uses `[(ngModel)]` which the OP doesn't want to use since he's using a form. — Ivar Reukers, May 23 '18 at 08:37
Hey @bgies, Somehow `ion-select` only works incase of `*ngFor` and `(value)="js_variable"`. Not with expressional values `value="{{ js_variable }}"` — Priya, Oct 20 '18 at 22:32
@Priya You are basically correct. I was finally able to fix my selects by not using static ion-options, putting the value and displayValue into an array and using *ngFor to loop through them.... — bgies, Nov 05 '18 at 04:09

Ivar Reukers · Answer 1 · 2018-05-24T14:27:54.853

So until there's an easy fix the current workaround in your case would be as follows:

<ion-select>
 <ion-option *ngFor="let country of countries" [selected]="country.id == userCountryId">
  ...
 </ion-option>
</ion-select>

Having a [selected]="true" on your ion-option will show it as the selected value in the ion-select

EDIT

Ok wow that doesn't work when using Forms. Ok. So, I've created a Plunkr in which this actually works. As you can see in home.page.ts the selectedCountry is 2 ('USA'), but in the FormBuilder I'm passing '3', which is 'DE'.

In case the plunkr gets deleted, code below.

<ion-content padding>
  <p>No Form:</p>
  <ion-select>
    <ion-option *ngFor="let country of list" [selected]="country.id == selectedCountry">
      {{country.country}}
    </ion-option>
  </ion-select>

  <p>FORM: </p>
  <form [formGroup]="loginForm" (submit)="doLogin()">
      <ion-select formControlName="country_name">
        <ion-option *ngFor="let country of list" [value]="country.id">
          {{country.country}}
        </ion-option>
      </ion-select>
  </form>
</ion-content>

TS:

export class HomePage {

  appName = 'Ionic App';
  list = [
    {country: 'NL', id: 1},
    {country: 'USA', id: 2},
    {country: 'DE', id: 3}
    ];

  selectedCountry = 2;

  loginForm: FormGroup;

  constructor(public navController: NavController, fb: FormBuilder) { 
    this.loginForm = fb.group({
      "country_name": [3]
    });
  }

Output:

Well, I've tried almost every possible option to make that work. The value is set correctly, but the value doesn't show on the select until the select is clicked on by the user. I've even tried it on a couple of other forms just in case I've got something in the login form that is interfering. Still no value showing on page load. — bgies, May 24 '18 at 13:49
@bgies I see, created a plunkr and messed around a bit. See the updated answer :) — Ivar Reukers, May 24 '18 at 14:28
If the problem still persists this might be a platform dependent issue. — Ivar Reukers, May 24 '18 at 14:33
Well, I really appreciate the time you took to try to help. Your Plunkr works in both Firefox and Chrome, but using the exact same code in my app doesn't work. However, I am using a newer version of Ionic 3 (3.9.2), Angular (5.2.10) plus Capacitor and a few others. I should mention that I did have it working at one point with an older version of Ionic, but then I upgraded, and it has never worked since... — bgies, May 31 '18 at 02:15

score 0 · Accepted Answer · answered Nov 05 '18 at 04:21

I found the answer based on @Priya comment. I had several selects with "static" options:

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option value="CA">Canada</ion-option>
   <ion-option value="US">United States</ion-option>
</ion-select>

Changing them to use an *ngFor fixed those:

in the .ts file:

public countryOptions = [
   { value: 'CA', displayValue: 'Canada' },
   { value: 'US', displayValue: 'United States' }
];

and in the .html file:

<ion-select type="input" name="country_id" formControlName="country_id">
   <ion-option *ngFor="let country of countryOptions" value="{{ country.value }}">{{ country.displayValue }}</ion-option>
</ion-select>

I should note that with one of the Ionic Updates, something was fixed (I don't know what), but suddenly some of the selects that did work several months ago, started working again.

In all the other selects, it was basically some combination of using *ngFor

Please note that I just typed the code into this answer, so there may be a few typos... but the answer is that using the *ngFor for the options fixes everything.

this is not beacuse of *ngfor its just a loop. this is fixed because of formControlName. Reactive forms fixed it for you — minigeek, Apr 23 '20 at 10:11

How to get to show the default value on form load with reactive form

2 Answers2