ngModel doesn’t work with multiple select

Explanation of the problem

The problem at hand involves the usage of the ngModel directive in Angular, specifically when attempting to bind it to selected values in a multi-select input. It appears that the ngModelChange event is not being emitted when new values are selected in the multi-select input, while it functions as expected for a single select input. Below is a code snippet that demonstrates the issue:

<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>

In the provided code, the ngModel directive is utilized to bind the shippingCountriesTemp property to the selected values in the multi-select input. The (ngModelChange) event is expected to trigger the onChange() function defined in the corresponding TypeScript file. However, it appears that the onChange() function is not being invoked when values are selected in the multi-select input.

The purpose of the onChange() function is to log the event value to the console:

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

The objective is to find a solution that ensures the ngModel directive successfully binds to the selected values in the multi-select input and triggers the onChange() function whenever new values are selected. Any assistance or guidance to resolve this issue would be greatly appreciated.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

• Instantly add logs to, set metrics in, and take snapshots of live applications
• Insights delivered straight to your IDE or CLI
• Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for: ngModel doesn’t work with multiple select

To solve the issue with ngModel not binding to selected values in a multi-select input and the onChange() function not being triggered, you can make use of Angular’s Reactive Forms.

First, import the necessary modules in your component file:

import { FormGroup, FormControl } from '@angular/forms';

Next, create a form group and control to handle the selected values:

// Declare a form group
form: FormGroup;

// Inside your component's initialization or constructor method
this.form = new FormGroup({
  shippingCountries: new FormControl([]) // Initialize with an empty array
});

In your template, bind the form control to the multi-select input using the formControlName directive:

<div class="input-field">
  <select materialize="material_select" [formControl]="form.get('shippingCountries')" 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>

Finally, you can subscribe to changes in the form control value using the valueChanges observable and perform the desired logic:

this.form.get('shippingCountries').valueChanges.subscribe((value) => {
  console.log(value); // Log the selected values to the console or perform other actions
});

By utilizing Angular’s Reactive Forms approach, you can effectively bind the selected values in the multi-select input and ensure that the desired logic, such as logging or further processing, is executed when new values are selected.

"dependencies": {
  "@angular/core": "^12.0.0",
  "angular2-materialize": "^15.0.0"
}

<button class="materialize-custom-btn">Custom Button</button>

.materialize-custom-btn {
  background-color: #ff0000;
  color: #ffffff;
  /* Add any other desired styles */
}

<button mzlButton color="primary">Submit</button>

<a mzlDropdownTrigger href="#" data-activates="dropdown1">Dropdown</a>
<ul id="dropdown1" mzlDropdown>
  <li><a href="#!">Option 1</a></li>
  <li><a href="#!">Option 2</a></li>
  <li><a href="#!">Option 3</a></li>
</ul>