Select tag ngModel NgModelOptions breaks selected option

Ionic Framework ionic-v3
1

I have the following code, where [(ngModel)]=“country” [ngModelOptions]="{standalone: true}" breaks the selected=“true” parameter and I don’t have a selected option anymore. If I remove the ng’s then the selected options works fine. Any suggestions what might be wrong here will be highly appreciated!

        <ion-item class="input-item">
            <ion-label class="input-label">Country</ion-label>
            <ion-select class="select" multiple="false" [(ngModel)]="country" [ngModelOptions]="{standalone: true}">
              <ion-option value="US" selected="true">United States</ion-option>
              <ion-option value="UK">United Kingdom</ion-option>
              <ion-option value="SG">Singapore</ion-option>
            </ion-select>
          </ion-item>
2

Nothing’s really wrong. That’s how <ion-select> works. If you bind a model to it with [(ngModel)], then the value of the backing model property determines the current (and initial) selection. The selected property is ignored. It only is effective when there is no backing model.

1 Like