How to check if each form control changed their value in reactive forms?

Question

What I want to achieve in the end is to see which form controls individually from my form have changed and to create a new object with them assigning a boolean of true if they were changed or false if not. Please see below what I achieved so far, but I don't think this the right approach as when I'll have more from controls my method will become gigantic. If you guys have any idea how I can approach this I would really appreciate it.

my Html

<form [formGroup]="editProfileForm">
      <ion-row>
        <ion-col>
          <ion-input
            *ngIf="profileData"
            formControlName="firstName"
            placeholder="First Name"
          ></ion-input>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <ion-input
            *ngIf="profileData"
            formControlName="lastName"
            placeholder="Last Name"
          ></ion-input>
        </ion-col>
      </ion-row>
</form>

<ion-fab
    vertical="bottom"
    horizontal="center"
    slot="fixed"
    (click)="onSubmitEditedProfile()">
    <ion-fab-button>
      <ion-icon name="checkmark-outline"></ion-icon>
    </ion-fab-button>
</ion-fab>

my TS

  onSubmitEditedProfile() {
    if (this.profileData !== null) {
      let updatedFirstName = this.editProfileForm.get("firstName").value;
      if (this.profileData.firstname !== updatedFirstName) {
      }
      console.log("it's the same");
    } else {
      console.log("it's different")
  }

And as my approach means, I'll do the same for lastName and so on

Answer 1

Here is the example where you can iterate each form control and identify either its changed or not based on that populate new array of object.

  onSubmitEditedProfile() {
   const formValue = [];
   // iterate over form controls no matter how many control you have.
   Object.keys(this.form.controls).map((key) => {
     // create a new parsed object 
     const parsedValue = {
      [key]: this.form.get(key).value, // key is the actual form control name
      changed: this.form.get(key).dirty // added changed key to identify value change
     }

    // push each parsed control to formValue array.
    formValue.push(parsedValue)
  })

  console.log(formValue)
 }

Here is the stackblitz working DEMO

Hope this address your requirements.

Answer 2

All you need is just to read dirty value on FormGroup or individual FormControl

https://angular.io/api/forms/AbstractControl#dirty

  onSubmitEditedProfile() {
    if (!this.editProfileForm.dirty) {
      console.log("it's the same");
    } else {
      console.log("it's different")
  }