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

junlan · Accepted Answer · 2019-11-14 15:29:47Z

6

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

answered Nov 14, 2019 at 15:29

junlan

2611 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GaryB · Accepted Answer · 2019-11-14 16:19:12Z

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, 2019 at 16:19

answered Nov 14, 2019 at 15:32

GaryB

3841 silver badge9 bronze badges

3 Comments

yukashima huksay Over a year ago

consider adding some explanation about how this works.

RezKesh Over a year ago

Yes it works, but I think @junlan answer is more robust.

GaryB Over a year ago

I never heard about pairwise, so I also learnt something new!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related