How to get the name of FormControl which got updated using valueChanges?

Question

In a form group that is dynamically generated with different FormControl names, valueChanges() is emitting the whole array. How we can identify the exact FormControl name which got updated?

Answer 1

You can listen to the FormControl itself like this

formGroup.controls.forEach(element => {
   formGroup.get(element).valueChanges = onControlValueChange;
});

onControlValueChange(v){
     // doTheJobHere();
}

You can also follow the same logic for FormArray

formArray.forEach(item => {
  (formArray[item].controls||[]).forEach(element => {
         formArray[item].get(element).valueChanges = onControlValueChange;
     });
});

Answer 2

I don't think there is default out of the box solution from Angular for this.
You'll have to do this kind of manually, after initiating the form, save a copy of form.value in a temp variable, then on your .valueChnages() call compare the new value with the temp value and extract the key for each that doesn't match.

Another way to do it without using a temp variable is to check for which fields got dirty as suggested here:
Angular Reactive forms : how to get just changed values

But the problem with is that sometime fields get dirty but no value changes. user may type something but then change their mind and delete that and leave it empty.