is there a way to detect the valueChanges for formArray which has been dynamically binded from array of objects in angular8

Question

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

just subscribe to this.agentSettingsInforForm.get('agentToogles').valueChanges like another FormControl/FormGroup — Eliseo
– Eliseo, Commented Feb 20, 2020 at 14:12
@Eliseo thanks for response, tried that as well but doesnt work, as it is dynamically binded, here array itself has got binded and there is no way to detect changes — Bhrungarajni
– Bhrungarajni, Commented Feb 20, 2020 at 14:13

Eliseo · Accepted Answer · 2020-02-20 20:15:39Z

0

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>

answered Feb 20, 2020 at 20:15

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

5 Comments

Bhrungarajni Over a year ago

thanks for response, will check and let you know, if i have any doubts, thanks a lot for explaining me where i am going wrong

Bhrungarajni Over a year ago

i made this demo working as per your inputs, stackblitz.com/edit/…

Bhrungarajni Over a year ago

but here the output what i get on click of save button is only true and false but i want that true and false value to be binded into boolValue of that particular object, please help

Bhrungarajni Over a year ago

stackblitz.com/edit/… in this demo, i have 2 arrays, and based on change in that it must update in agentSettingsInfoForm, here in one array, only true and false values are getting binded, if there is any change it is reflecting. But in the final output only true and false is coming but i need to have array of objects, i mean same array of objects i need but the boolvalue to be updated according to change made in the checkboxes, and also i am not getting how to bind both checkbox and datevalue

Bhrungarajni Over a year ago

in need of bad help and suggestions, as you suggested i was able to work till there and i am struck so i need your help and suggestions some more please

Collectives™ on Stack Overflow

is there a way to detect the valueChanges for formArray which has been dynamically binded from array of objects in angular8

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related