Ionic3: Using ngModel with <ion-select> breaks page nav or display

Question

When adding [(ngModel)]="selectedCategory" to a <ion-select> element in a page, the page does not display anymore:

• If I try to access the page from a classic Push, the redirection does not occur.
• If I try to access the page from a deeplink, I got a blank page displayed (even if when I'm looking at Chrome inspector, I can see that everything seems to be loaded).

As soon as I remove the [(ngModel)]="selectedCategory", everything works normally again.

There is no error in the console.

html

<form (ngSubmit)="onSubmit()" #f="ngForm" autocomplete="off">

    <ion-list no-margin>
      <ion-item no-margin no-lines>
        <ion-select style="max-width: 100%; padding-left: 0;"
                    interface="action-sheet"
                    [(ngModel)]="selectedCategory"
                    required
                    placeholder="Choisissez un sujet">
        <!-- <ion-options here> -->
        </ion-select>
      </ion-item>
    </ion-list>

</form>

typescript

@IonicPage()
@Component({
  selector: 'page-feedback',
  templateUrl: 'feedback.html',
})
export class FeedbackPage implements OnInit {
  @ViewChild('f') feedbackForm: NgForm;

  selectedRating: string;  // This uses ngModel too, but this one makes no problem!
  selectedCategory: string;

versions

• Ionic Framework : ionic-angular 3.7.1
• Node : v8.7.0
• npm : 5.4.2

Answer 1

You need to add name in ion-select like this

<ion-select style="max-width: 100%; padding-left: 0;"
                interface="action-sheet"
                [(ngModel)]="selectedCategory"
                required
                placeholder="Choisissez un sujet" name="selectName">

Hope this work for you