Get only changed values from Reactive From of Angular

Question

I am working on an Angular-6 project.

I have many forms with different structures. I want a generic method which returns only modified FromControls with modified values, doesn't matter what the Form structure is.

I have thought of some ways to do that.

One is to subscribe to valueChanges() method of every single FormControl. But the disadvantage is it messes up the code.

The second way is that I can bind a method to event (change) for every FormControl and check if its value is changed or not. But again this doesn't seem to be the best way.

Is there any way to do this in the appropriate manner?

Answer 1

Create the form using FormBuilder, with the desired controls.

this.myForm = this.formBuilder.group({
    ctrl1: '',
    ctrl2: ''
});

---

Assign a variable for the control that you need to detect its changes.

this.control1 = this.myForm.get('ctrl1');

---

Use a method to get the value changes:

getControlVal(val) 
{
   console.log(val)
}

---

And on the template, pass the control value every 'keyup' event:

<form [formGroup]="myForm">
    <input formControlName="ctrl1" (keyup)="getControlVal(control1.value)" />
</form>