angular2-materialize: ngModel doesn't work with multiple select

Hi,

I can’t get ngModel to bind to selected values in a multi-select (but single select works fine). I think the problem is that no event is being emitted when new values are selected. See sample code below. The onChange function isn’t called when values are selected in the multi-select.

Sample html code:

    <div class="input-field">
          <select materialize="material_select" [ngModel]="shippingCountriesTemp 
                       (ngModelChange)="onChange($event)" multiple>
                             <option value="" disabled selected>Click Here for Options</option>
                             <option *ngFor="let country of countryOptions" [value]="country">{{country}}</option>
           </select>
           <label>Countries You Ship To</label>
    </div>

onChange function (in .ts file) just prints the event value to screen:

onChange(r) { console.log(r); }

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 1
Comments: 18 (3 by maintainers)

Most upvoted comments

Thanks, but unfortunately not. I think [materializeSelectOptions] only updates dynamically changing options. The options in my case are static (the user is just selecting specific countries out of a list of all countries in the world). When I select options in the multi-select, the view changes just fine and displays the newly selected countries.

The problem I’m having is that I can’t get the values out of the multi-select. So, for example, if I add [(ngModel)]="shippingCountries" I’d like to have the value stored in shippingCountries so I can use it later.

FoodBuster on Jun 27, 2016

After upgrading angular etc I seem to have lost (change) events on

    <select materialize="material_select"  (change)="testing($event)" multiple>
                                    <option [value]="-1" disabled>(None)</option>
                                    <option [value]="1" >Fugl</option>
                                    <option [value]="2" >Fisk</option>
     </select>

testing() is never called… I have also tried (ngModelChange). no events. If I remove mulitple, events flow as expected.

Anyone know about a fix or workaround?

snarum on Sep 27, 2016

Does this help? https://github.com/InfomediaLtd/angular2-materialize/issues/21#issuecomment-216533515

rubyboy on Jun 27, 2016

It seems the problem lies in the event type that multiple selects receive after being changed. At the Angular team, they played around with the event type, so in Angular 2 RC 4, the problem lies in this line:

https://github.com/InfomediaLtd/angular2-materialize/blob/master/src/materialize-directive.ts#L99

The “change” event doesn’t trigger a ngModelChange but “input” does. So changing the line to this would at lease work in Angular 2 RC 4:

event.initCustomEvent("input",false,false,undefined);

I’m not sure if this is future-proof but at least it’s a starting point for this issue.

matthias-schuetz on Aug 10, 2016