Angular2 ngModelChange previous value

Question

Is there a way to get the previous(last) value of a field on ngModelChange? What I have goes something like this

HTML

<input type="text" [(ngModel)]="text" (ngModelChange)="textChanged($event)">

Handler

private textChanged(event) {
    console.log('changed', this.text, event);
}

What I get is

changed *newvalue* *newvalue*

Of course I can keep the older value using another variable, but is there a better way?

score 44 · Answer 1 · answered Oct 21 '16 at 09:01

44

What you can do is,

DEMO : http://plnkr.co/edit/RXJ4D0YJrgebzYcEiaSR?p=preview

<input type="text" 
       [ngModel]="text"                      //<<<###changed [(ngModel)]="text" to [ngModel]="text"
       (ngModelChange)="textChanged($event)"> 

private textChanged(event) {        
    console.log('changed', this.text, event);
    this.text=event;                          //<<<###added 
}

answered Oct 21 '16 at 09:01

micronyks

54,797
15
112
146

thank you, I marked your answer useful but it seems it won't show yet. – irtaza Oct 21 '16 at 11:34
One tick mark is there. You just need to click it and it will apper in green color. – micronyks Oct 21 '16 at 12:55
@Irtaza click on 'grey check' on the left side of this answer (below points) – Kamil Kiełczewski Nov 03 '16 at 12:29
doesnt this breaks two way data binding? – Maaz Rehman Apr 15 '20 at 17:36

score 31 · Accepted Answer · answered Oct 21 '16 at 11:42

31

So found kinda weird(at least for me) possible solution for this with least changes in the code in question. So on assigning the (ngModelChange) attribute before [(ngModel)] what I get is following with the same handler:

changed *older value* *new value*

I get the new value in this.textlike so:

setTimeout(() => console.log(this.text), 0);

answered Oct 21 '16 at 11:42

irtaza

721
1
6
13

12

This little caveat was costing me time, wasn't aware that the order of ngModel and ngModelChange made a difference. – Viprus Oct 24 '16 at 08:52
4

Oh, that __is__ awkward! Why should the order make a difference? – HaveSpacesuit Jul 06 '17 at 21:49
1

one of the dumb things about Angular is that it seems these little nuances are more frequent than not. What a dumb feature, but thank you for finding this! – Charles Harris Dec 10 '17 at 03:40
Wow... Awesome find! This alongside Micronyks' answer would collectively be THE answer. – Cody Jun 26 '18 at 19:32
Wow! This is weird – Rajat Apr 26 '21 at 11:25

DiSaSteR · Answer 3 · 2020-07-16T12:11:00.710

15

all you need to do is to put (ngModelChange)="textChanged($event)" to the left of [(ngModel)] element in the html tag, like:

<input (whatever...) (ngModelChange)="textChanged($event)" [(ngModel)]="text">

This way, inside textChanged(event), the element you are binding to still has the previous value, while event is the new one

If you type

<input (whatever...) [(ngModel)]="text" (ngModelChange)="textChanged($event)">

The event will be called with new value only. However:

<input (whatever...) (ngModelChange)="textChanged($event)" [(ngModel)]="text" (ngModelChange)="textChanged($event)">   -

Will get you both events with previous and current value

edited Jul 16 '20 at 12:11

answered Mar 15 '18 at 14:25

DiSaSteR

608
6
11

2

This is the correct answer. I did not know that the order of the (ngModelChange) and the [(ngModel)] inside the element is important. Thank you – Developer Thing Feb 28 '19 at 15:52
Yes this is the correct workaround for the Angular bug!! In the Angular Doco, under ngModel it says: "Event emitter for producing the ngModelChange event after the view model updates." NOTE the "after the view model updates" So that would make it a Angular bug, because it is NOT deterministic!! – GregJF Jul 15 '20 at 01:59
If you need both on and new values then don't use the (ngModelChange)="eventHandlerMethod($event)", use the (change)="eventHandlerMethod($event)" – GregJF Jul 15 '20 at 02:05

score 2 · Answer 4 · answered May 22 '19 at 15:04

2

<input (ngModelChange)="preTextChanged($event)" [(ngModel)]="text" (ngModelChange)="postTestChanged($event)">

In this way you can know the previous value and the next value

answered May 22 '19 at 15:04

Dani Andújar

1,116
1
12
15

1

This behavior was so strange to me. Why would the attribute position for a tag make any difference? They should be named separate. Thank you for clearing this for me. – Jimmy Garpehäll Feb 17 '20 at 13:32

score 1 · Answer 5 · answered Jul 11 '22 at 04:02

You can use getters and setters to retain older values. E.g.

HTML

<input type="text" [(ngModel)]="text" (ngModelChange)="textChanged($event)">

TypeScript:

private _text: string = "";
private _oldText: string = "";
get text(): string{
    return this._text;
}
set text(value: string) {
    this._oldText = this._text;
    this._text = value;
}

Source: https://www.typescripttutorial.net/typescript-tutorial/typescript-getters-setters/

score 0 · Answer 6 · answered Apr 09 '22 at 09:31

This worked for me.

<input
   [(ngModel)]="actionInputValue"
   (keydown)="prevValue = actionInputValue"
   (keyup)="doSomething()"
/>

Now in component ts file you can console and check the values.

doSomething() {
  console.log(this.prevValue, this.actionInputValue);
}

The idea is that keydown event occurs before the ngModel is updated.

Angular2 ngModelChange previous value

6 Answers6

Linked