ngModel doesn't work with multiple select

[FoodBuster]

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); }

[rubyboy]

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

[FoodBuster]

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.

[matthias-schuetz]

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.

[prolink007]

@FoodBuster Is there any chance that you can share your code for how you got the single select to work? I am having trouble getting the single select to work with ngmodels.

Thanks

[snarum]

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]

After downgrading angular2-materialize to 5.1.2 it started working again.

[rubyboy]

@snarum check out these two PRs and see if these changes are related: https://github.com/InfomediaLtd/angular2-materialize/pull/108 , https://github.com/InfomediaLtd/angular2-materialize/pull/101 , https://github.com/InfomediaLtd/angular2-materialize/pull/107

CC @TheAppchemist , @leonardobazico

[snarum]

they seem related, but I can't be sure. I would guess it is this change that caused the problem though:

https://github.com/InfomediaLtd/angular2-materialize/commit/53ca9085

[rubyboy]

The latest code dispatches a different event if it's multiple or single:

jQueryElement.on("change", e => {
          if (!e.originalEvent || !e.originalEvent.internalToMaterialize) {
            const event:any = document.createEvent("CustomEvent");
            if (jQueryElement.attr("multiple")) {
              event.initCustomEvent("input",false,false,undefined);
            }
            else {
              event.initCustomEvent("change",false,false,undefined);
            }

            event.internalToMaterialize = true;
            nativeElement.dispatchEvent(event);
          }
        });

Would you like to confirm if dispatching "change" works in both cases and then we can take out the "if" statement and just use "change" for both?

[snarum]

When I changed my code to (input)= instead of (change)= it works for 5.1.4 also, so that's good enough for me. single select still works with (change)=. I just wasn't aware of this change.

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

[ctytgat]

Multiselect binding with reactive forms is also broken:

      <select multiple materialize="material_select" [materializeSelectOptions]="myOptions" formControlName="myOption">
        <option value="" disabled selected>Choose option...</option>
        <option *ngFor="let option of myOptions" [ngValue]="option">{{option.name}}</option>
      </select>

When submitting the form, formcontrol 'myOption' always has null as value. Also here, downgrading to 5.1.2 fixes it.

Another issue I see is that resetting the formcontrol does not clear the multi select element...

[JohnCashmore]

Did you ever resolve this?

Multiselect binding with reactive forms

[ctytgat]

no, using 5.1.2 for now

[shayanhusaini]

Multi select binding with reactive forms is still broken. Any updates when this will be fixed?

[MelanyB]

Hi @FoodBuster.. Did you find the solution for this problem?

[sheyooo]

I think this problem is with angular, if you inspect the data in your value of your options, Angular alters the value, at least in my own case/ scenario

[JSONCODE007]

Mutli select with ngModel is still broken in 15.1.8 version ! Any updates when this will be fixed ?

[tsuzukayama]

Still broken in version 15.1.10, any updates?