is there a way to detect the valueChanges for form

问题:

is there a way to detect if there are any valueChanges for the toggle buttons made to form array which has been binded from dynamic array of objects.

Here, i am getting this.agentDetailsList and this.detailsToggle from the api, if i am in edit mode, this.agentDetails array i am binding to the formArray by using this.detailsToggle as this array has been used to bind in the html for looping. Here even though i made changes to the formarray it is not reflecting. Basically my requirement is that, if there is any change in this formarray toggles before clicking on save, then API must be called, if there are no changes then api request shouldnt be made. Here i am not able to use valueChanges or statusChanges as both are not working.

Help appreciated. Thanks in advance

TS: 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")
        }

}

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

DEMO

回答1:

the problem is that you has any FormArray.

//this has no sense
this.FB.array([this.detailsToogle]) 

Do you want to write ?

this.FB.array(this.detailsToggle.map(x=>this.FB.group(x)))

This is a FromArray of FormGroups

Any way, if you only want to change the boolValue, you don't need create a formArray so complex, you can simply

this.FB.array(this.detailsToggle.map(x=>x.boolValue))

this is FormArray of FormControls

When you has an FormArray is for manage a FormArray. You has some too complex as

<input type="checkbox" [checked]="toggleValue.boolValue" (change)="toggleValue.boolValue = $event.target.checked">

when can be like,e.g. is is a FromArray of FormControls

<input type="checkbox" [formControlName]="i"> 

Really, you need ask you what data you want get and what data you want change. Tip: Before write nothing in your .html write

<pre>
{{agentSettingsInfoForm.?value |json}}
</pre>