ngModel and change method on input does not work

Question

I have the following HTML template

<input type="text" [(ngModel)]="mobile" (change)="mobileChanged()">

Here is my .ts

mobileChanged = () => {
    console.log(this.mobile);
};

Is it wrong to have ngModel and change in the same element? In my case mobileChanged is not being called while I type in the input. How ever, when I check the value of mobile, it is updated correctly.

This is Angular 7.

You should be using ngModelChange instead of change event https://stackoverflow.com/questions/34405301/detect-change-to-ngmodel-on-a-select-tag-angular-2 — German Meza, Dec 04 '19 at 14:55
You might have to add the `[ngModelOptions]="{standalone: true}"` option. — Nicolas, Dec 04 '19 at 14:57

Dino · Accepted Answer · 2019-12-09T08:06:38.313

9

Using change will trigger the mobileChanged() when you lose the focus of the input field (ex: Click outside the field). If you want to trigger mobileChanged() while typing, use (ngModelChange)="mobileChanged($event)" instead.

edited Dec 09 '19 at 08:06

answered Dec 04 '19 at 14:56

Dino

7,779
12
46
85

yes, that did it. and keypress like events also works – bula Dec 04 '19 at 15:14

score 0 · Answer 2 · answered Dec 04 '19 at 16:02

I sugest to read this tutorial : https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html in order to understand well the two-way Data Binding and to master the use of ngModel.

As it's explained using ngModel bind an expression to the element’s input event, so it's similar to :

<input [value]="mobile" (input)="mobile = $event.target.value">

you could manage the update of the value and your log in the same method called.

ngModel and change method on input does not work

2 Answers2