Setting an option to selected="true" does not set value

Ionic Framework ionic-v3
1

Using this code:

  <ion-item>
    <ion-label floating>Payment Frequency</ion-label>
    <ion-select #planPayFreq (change)="elementChanged(planPayFreq)"
      formControlName="planPayFreq" [(ngModel)]="ongoingPlansForm.planPayFreq" multiple="false">
      <ion-option value="1"  selected="true">Annual</ion-option>
      <ion-option value=".08333333">Monthly</ion-option>
    </ion-select>
  </ion-item>

I would expect that Annual, or the first option, would be selected upon load. This does happen, but when you try to do an *ngIf=“ongoingPlansForm.planPayFreq == 1”, it fails because the value is not set as 1 for this select. When inspecting the element on load (before I select anything it looks like:

<ion-select formcontrolname="planPayFreq" multiple="false" ng-reflect-multiple="false" ng-reflect-name="planPayFreq" class="ng-untouched ng-pristine ng-invalid">

And after selecting Annual as an option, it changes to:

<ion-select formcontrolname="planPayFreq" multiple="false" ng-reflect-multiple="false" ng-reflect-name="planPayFreq" class="ng-touched ng-dirty ng-valid" ng-reflect-model="1">

And now the *ngif works fine.

Is this a bug with the selected=“true” property?

2

FYI, I ended up working around this problem by doing this:

First I changed my original code to:

      <ion-item>
        <ion-label floating>Payment Frequency</ion-label>
        <ion-select #planPayFreq (change)="elementChanged(planPayFreq)"
          formControlName="planPayFreq" [(ngModel)]="ongoingPlansForm.planPayFreq" multiple="false" [value] = 1 >
          <ion-option value="1" selected="true">Annual</ion-option>
          <ion-option value=".08333333">Monthly</ion-option>
        </ion-select>
      </ion-item>

Basically, I just added [value] = 1.

Then I adjusted my *ngIf to be:

*ngIf="ongoingPlansForm.planPayFreq != .08333333"

Probably not ideal, but it works.

1 Like