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

Answer 1

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]) => ... );