this.form = this.fb.group({ 
  prop1: '',
  prop2: ''
});

this.form.valueChanges.pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => {
    console.log('PREV2', prev);
    console.log('NEXT2', next);
  });

using this code I am able to get the previous value and current value. what I want is there any way to get which field is changed, prev value and current value.

like field changed name: prop1, prev value:"", current value: "next value"

 this.form = this.fb.group({ 
  prop1: '',
  prop2: ''
});

this.form.valueChanges.pipe(startWith(null), pairwise())
  .subscribe(([prev, next]: [any, any]) => {
    console.log('PREV2', prev);
    console.log('NEXT2', next);
  });

using this code I am able to get the previous value and current value. what I want is there any way to get which field is changed, prev value and current value.

like field changed name: prop1, prev value:"", current value: "next value"

• javascript
• angular
• rxjs
• angular-reactive-forms

• Do you want to find json difference? – Eranki Commented Feb 1, 2020 at 10:49
• which form field value is changed that field name, prev value and current value – Dinesh Ganesan Commented Feb 1, 2020 at 11:00
• There's no build-in RxJS operator but I think lodash has some function for that. – martin Commented Feb 1, 2020 at 11:06
• I think you should remove startWith operator first and try again but this way will always get you the previous json form and the current json form. – Shorbagy Commented Feb 2, 2020 at 1:23

1 Answer 1

Instead of subscribing to theFormGroup.valueChanges observable, you could subscribe to the FormControl.valueChanges observable. See https://angular.io/api/forms/FormControl for the implementation. This way you could have access to the control itself. Maybe something like this?

Object.keys(this.form.controls).forEach(key => {
        this.form.controls[key].valueChanges.pipe(startWith(null), pairwise())
        .subscribe(([prev, next]: [any, any]) => {
            console.log(key) // your FormControl Identifier 
            console.log('PREV2', prev);
            console.log('NEXT2', next);
        });
    });