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)
        })
}

Felix Lemke · Accepted Answer · 2020-02-19 15:22:11Z

0

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);
}

edited Feb 19, 2020 at 15:22

answered Feb 19, 2020 at 15:16

Felix Lemke

6,4863 gold badges46 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Bhrungarajni Over a year ago

thanks for response, here my issue is with the data, initially the agentDetailsList will have different boolValue but when i make changes in the form, the agentDetailsList values are same as detailsToggle. Could you please help me to solve that

Bhrungarajni Over a year ago

is the issue with form i have used?

Bhrungarajni Over a year ago

Please have a look when you get free time, i have also attached demo, in that it gives both console values as same, the edited one and the already declared array values are same.If both are different then this comparison works fine

Felix Lemke Over a year ago

Thanks, I'll investigate it at some time today.

Bhrungarajni Over a year ago

thanks for response, yes please, i have made some changes, please message me before you start, i will give me updates

|

Izzy030 · Accepted Answer · 2020-02-20 16:52:35Z

0

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

answered Feb 20, 2020 at 16:52

Izzy030

592 silver badges11 bronze badges

1 Comment

Bhrungarajni Over a year ago

thanks for response, but it is not working as i expected could you please answer me this, stackoverflow.com/questions/60321749/…

Collectives™ on Stack Overflow

How to compare array of objects using angular8 using reactive forms

2 Answers 2

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related