Angular 2 ngModel compare old and new value

angular angular2-ngmodel
Aer0 picture Aer0 · Dec 26, 2016 · Viewed 7.6k times · Source

So I've been playing around with Angular 2 for a while now. Using the [(ngModel)] directive in an <input> is pretty simply. Yet I can't figure out how to pass or at least get the previous value so I can compare both - the new and old one.

I'm getting the change detection through (ngModelChange) since (change) fired up after bluring out of the input field (seems to be a bug btw). So my code currently looks like this ($event could be seen as a placeholder, since I've no idea what to pass in).

<input [(ngModel)]="myModel" (ngModelChange)="changeEvent($event)">

I've also tried passing in a custom local template variable like so, which obviously didn't work as well:

<input [(ngModel)]="myModel" #myModel="ngModel" (ngModelChange)="changeEvent($event)">

I know, there's at least a possibility to achieve this by using DoCheck. But since I just need that for a single time (currently) I really don't want to use that method. On top of that I'm using the above construct inside of an *ngFor.

Answer

Piou picture Piou · Dec 26, 2016

You can use the following:

HTML Template: [(ngModel)]="myModel" #model (change)="changeEvent(model.value)"

Javascript handler:

changeEvent(newValue) {
  console.log(newValue, this.myModel);
}

The console will log:

<newValue>, <oldValue>

Related questions

Using Pipes within ngModel on INPUT Elements in Angular

I've an HTML INPUT field. <input [(ngModel)]="item.value" name="inputField" type="text" /> and I want to format its value and use an existing pipe: .... [(ngModel)]="item.value | useMyPipeToFormatThatValue" .... and get the error message: Cannot have a pipe …

Read More
Angular - How can I write a condition in interpolation?

I have a table which is being populated through the add client form. It works fine and the changes are displayed. The thing is I have a select list in which a user selects the specific source and then it …

Read More
How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

Using ngx-bootstrap Datepicker in an Angular 4 application, I know that normally you can specify the date format this way: <input id="from" name="from" bsDatepicker [(bsValue)]="myModel" value="{{ myModel | date:'yyyy-MM-dd'}}"> but this time I'm inside a template-driven …

Read More