change event of select in Angular 2 not working in Firefox and Edge

Question

this is my code:

<select class="form-control selectpicker" (change)="changeTower()" [(ngModel)]="_selectedTower._id">
    <option attr.value="{{tower._id}}" *ngFor="#tower of _towers;">Tower {{tower.name}}</option>
</select>

In firefox changeTower() is not hitting at all.
In Edge it works only for first time and then stop working at all.

.

value of _selectedTower._id is not getting changed after first change..

Can't reproduce in Firefox https://plnkr.co/edit/0aKi1C966h80CPVHR169?p=preview and edge — Günter Zöchbauer, Apr 21 '16 at 07:40
yes its working fine in this plunk r, but not in my code, don't know what's wrong — Arun Tyagi, Apr 21 '16 at 07:44
Do you use the latest Angular version? Do you use `*.min.js` instead of `*.dev.js` (`*.min.js` is still broken AFAIK)? — Günter Zöchbauer, Apr 21 '16 at 07:45
found the issue, I update your plunker https://plnkr.co/edit/Z0yi2S3JGQ7nNMFeeOHT?p=preview value of model is not getting changed — Arun Tyagi, Apr 21 '16 at 08:05

score 2 · Answer 1 · answered Apr 21 '16 at 08:12

That is a known issue in Firefox and Edge

The workaround is to use the (change) event (and the events value) instead of ngModelChange

<select [ngModel]="value" (change)="changeValue($event.target.value)">

AFAIK there are already fixes but not yet released.

change event of select in Angular 2 not working in Firefox and Edge

1 Answers1