Ionic 2: ion-select [(ngModel)] two-way binding not working

Ionic Framework ionic-v3
1

Problem

I have a form with one ion-input, one ion-textarea, and one ion-select input. With the select input commented out the model binding works but when I uncomment the select input it breaks the model binding for all inputs.

The easiest way to show this is in a Plunker example:

  • Go to the Plunker example

  • Fill in the form

  • Click submit and see the values displayed in an alert

  • Now uncomment the ion-select stuff in home.html and home.js

  • Repeat step 2 and 3 and see that the model was not updated with the values this time.

Maybe I’m doing something wrong with the ion-select input but I can’t see what so a second pair of eyes may be able to spot something.

Any help will be appreciated thanks.

Additional Info

Im unsure of the libraries in the Plunker but in a local project the same happens with the following app info:

Cordova CLI: 5.4.0
Gulp version: CLI version 3.8.11
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 8.1
Node Version: v4.4.2

2

have you tried upgrading to ionic2 beta10 (and most importantly angular2 rc3). I remember there is a responsibility-problem / understanding-issue between ndModel and ngFormModel (and ngControl?) on select-elements.

Possible dsetails: https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub

With Angular2 rc.3 try to use formGroup on the select and a normal ngModel on the option and see if this works, eg.

<select [formGroup]="formBuilderVariable">
    <option *ngFor="let item of items" [(ngModel)]="item">
        {{item.text}}
      </option>
</select>

If this works, try to replace select with ion-select and option with ion-option.

3

Thanks for the reply.

Upgrading to beta 10 was one of the last things on my list to try. Mainly because of the lack of issues reported on this in this forum or stackoverflow or github (I coulnd’t find anything anyway!), so I just assumed it worked for everybody else and it was me doing something wrong.

I will try updating to beta 10 and let you know how things go once I’ve tested it.

4

Two way binding now works using the new @angular/forms module.

For now I have had to use plain HTML for my input elements though because Ionic’s elements don’t currently support the new forms module. Support should be provided for beta 11 (as pointed out here).

5

Nice to hear. Had the same problems with ion form elements in beta.9, thought the new angular form module had made it into beta.10.
Thanks for linking the github issue, will keep a watch myself. :slight_smile:

6

<select #thisCourseTypeElement [ngModel]=“courseTypeValue” (change)=“onCourseTypeChange($event.target.value, thisCourseTypeElement.selectedIndex)”>
<option *ngFor=“let item of courseTypeList”>{{item.name}}

Above code we used how we can archive this in
(change)=“onCourseTypeChange($event.target.value, thisCourseTypeElement.selectedIndex)”
(change) in snot working in

can any one pls… help me on this.