How to compare array of objects using angular8 using reactive forms

Question

i have used reactive forms, and the values are getting assigned to the html and the reactive forms is due to the array of object. So, what ever action i perform there must be used for comparing objects with the existing object. So i have used one array of object comparison method. But here the previous value is also getting binded to the new value which has been assigned to the form.

I want the newly edited value and the old value as seperate so that i can compare if the object proerty values are diffrent then i can enable for save.

DEMO: DEMO

TS:

saveDetails() {
 this.objectsAreSame(this.agentDetailsList, this.detailsToggle)
      console.log(this.agentDetailsList);
      console.log(this.detailsToggle);
      console.log(this.objectsAreSame,"this.objectsAreSame")
    }

      objectsAreSame(a1, a2) {
    for (var i = 0, len = a1.length; i < len; i++) {
      for (var j = 0, len = a2.length; j < len-1; j++) {
          if (a1[i].boolValue == a2[j].boolValue) {
              return false
          } else {
            return true
          }
      }
  }
}

FORM:

  private settingsInfoForm() {
    if (!this.agentDetailsList) {
      // Add
      this.agentSettingsInfoForm = this.FB.group({

        agentToogles: this.FB.array([this.detailsToggle]),
      });
      // this.authService.setDetailsData(this.agentSettingsInfoForm);
    } else {
      // Edit
      if (this.agentDetailsList) {
       this.detailsToggle = this.agentDetailsList
       this.agentSettingsInfoForm = this.FB.group({
          agentToogles: this.FB.array([this.detailsToggle]),
      })
      }
        let settingsInfo = this.agentSettingsInfoForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentSettingsInfoForm', this.formEdit)
        })
}

Answer 1

You can use the Array.prototype.reduce function to compare the objects. It cycles through all the elements of the first array and starts with an initial value of true . If the item with the current index exist in the second array then it returns the overlap of all previous comparisons and the current elements at index . If it does not exist, then it returns false. Once one value is false the result is false .

compare(
  array1.map(item => item.boolValue),
  array2.map(item => item.boolValue)
);

function compare(arr1: Array<boolean>, arr2: Array<boolean>) {
  return arr1.reduce((acc, cur, index) => acc && cur === arr2[index], true);
}

Answer 2

I tried to understand your code and that was a little hard time for me since im also quite new to Angular.

Reactive forms in angular are a concept to work on as best with observables. RxJs seems to be essential when it comes to check changes in FormGroups: https://rxjs-dev.firebaseapp.com/api

Angular doc to observables: https://angular.io/guide/observables

I know its not that easy to understand the docs.

In the code im tryting to show you how to initiate FormGroups by the Formbuilder and listening to changes in your form. At the subcription section you see my comparsion with your object and loggig to console.

I hoped I could helped you. Feel free to ask in the comments. StackDemo: https://stackblitz.com/edit/angular-58vovb