Angular ngModelChange Internet Explorer 11

Question

I use Angular 4.2.4 and Angular Material 2.0.0.beta.12 and have following form field:

<mat-form-field>
    <input matInput placeholder="street" value="{{info.street}}" [(ngModel)]="info.street" (ngModelChange)="formChange()">
</mat-form-field>

In Firefox and Chrome everything works as it should and an events fires if I change the input value. But in Internet Explorer 11 everytime the site loads or if I focus the input field the ngModelChange is fireing.

Is there a way to solve this issue? (change) is working but only fires if I focusout the input what is not practicable.

Answer 1

I found out that placeholder attribute is what makes a difference in Internet Explorer. Without it ngModelChange works as expected.

The workaround for this case is to put the placeholder in square brackets :

 [placeholder]="'placeholder value'"

I assume that the placeholder is appended to the input element later (after IE processes it) and that's why IE doesn't fire ngModelChange event.

Answer 2

I have the suspicion that it's because use use value and ngModel at the same time. It should be either one or the other. Change to the following:

<input matInput placeholder="street" [ngModel]="info.street" (ngModelChange)="formChange()">

or try, as suggested by Grobanix:

<input matInput placeholder="street" [ngModel]="info.street" (keypress)="formChange()">