CODEWITHSUNDEEP
angularangular2-ngmodel
irtaza
irtaza

Reputation: 749

Angular2 ngModelChange previous value

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?

Upvotes: 39

Views: 44379

Answers (6)

OliviaLynn
OliviaLynn

Reputation: 143

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/

Upvotes: 1

Animesh Rawat
Animesh Rawat

Reputation: 345

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.

Upvotes: 0

DiSaSteR
DiSaSteR

Reputation: 636

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

Upvotes: 18

Dani And&#250;jar
Dani And&#250;jar

Reputation: 1176

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

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

Upvotes: 4

irtaza
irtaza

Reputation: 749

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);

Upvotes: 32

micronyks
micronyks

Reputation: 55443

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 
}

Upvotes: 44

Related Questions