Angular reactive form having the old value on (change) event callback

Question

Consider an Angular reactive form with an input. Whenever the input changes, we want to keep its old value and display it some where. the following code does it as displayed:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Reactive Form';
  changedValue;
  oldValue;
  ooldValue;
  rform = new FormGroup({
    inputOne: new FormControl('chang me')
  });


  onOneChange(event) {
    this.changedValue = event.target.value;
    console.log('oneChanged', this.changedValue, 'old value is', this.oldValue);
    this.ooldValue = this.oldValue;
    setTimeout( ()=>this.oldValue = this.changedValue, 1);
  }
}

<form [formGroup]="rform">
    <label>
      One:
      <input formControlName="inputOne" (change)="onOneChange($event)"/>
    </label>
  </form>
  <p>
    changed value: {{changedValue}}
  </p>
  <p>
        old value: {{ooldValue}}
  </p>

As you can see it has been addressed by keeping three variables in the code which is not desirable (Yes the changedValue variable can be removed, but still two variables to keep the old value is annoying, isn't it?).

Is there any way to rewrite the code with less variables? Does Angular itself has a descent way to do that?

You can find the code here

score 6 · Accepted Answer · answered Nov 14 '19 at 15:29

valueChanges is an Observable so you can pipe pairwise to get the previous and next values in the subscription.

// No initial value. Will emit only after second character entered
this.form.get('inputOne')
  .valueChanges
  .pipe(pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );
// Fill buffer with initial value, and it will emit immediately on value change
this.form.get('inputOne')
  .valueChanges
  .pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => ... );

GaryB · Answer 2 · 2019-11-14T16:19:12.387

2

this.rform
   .controls["inputOne"]
   .valueChanges
   .subscribe(selectedValue => {
        console.log('New Value: ', selectedValue);       // New value
        console.log('Old Value: ', this.rform.value['inputOne']); // old value
   });

edited Nov 14 '19 at 16:19

answered Nov 14 '19 at 15:32

GaryB

374
1
9

consider adding some explanation about how this works. – yukashima huksay Nov 14 '19 at 16:40
Yes it works, but I think @junlan answer is more robust. – RezKesh Nov 18 '19 at 09:29
I never heard about pairwise, so I also learnt something new! – GaryB Nov 18 '19 at 09:45

Angular reactive form having the old value on (change) event callback

2 Answers2