title: How to bind array of objects to formGroup and formarray using angular8
body: <p>Hi i have used reactive forms to bind array of objects to formArray, but here if i select any one item in one section and click of move to right/move to left, then the entire object has been moved from one section to other. But that functionality is working fine but i am unable to detect the chnages made from one section to other in the form.valuechanges(). Can anyone help me to detect the changes incase items has been moved from one section to other, and here i want the change detection but the functionality must work as it is, i mean the entire object to be moved from one section to other.</p>
  
  <p>Thanks in advance.</p>
  
  <p>I have working demo2 here, i want my previously posted demo1 to work like this demo2 with formarray working.
  <a href="https://stackblitz.com/edit/angular-lh5vzl?file=src%2Fapp%2Fapp.component.ts" rel="noreferrer">DEMO 2</a></p>
  
  <p>DEMO:
  <a href="https://stackblitz.com/edit/angular-vd8gnv?file=src%2Fapp%2Fapp.module.ts" rel="noreferrer">DEMO 1</a></p>
  
  <p>TS:</p>
  
  <pre><code> private settingsGroupInfoForm() {
      if (!this.agentDetailsList) {
        // Add
       this.agentGroupViewInfoForm = this.FB.group({
            agentGroupView: this.FB.array(
              this.agentInView.map(x=&gt;(x))
            ),
          })
      } else {
        // Edit
        if (this.agentDetailsList) {
  
         this.agentGroupViewInfoForm = this.FB.group({
            agentGroupView: this.FB.array(this.agentInView.map(x=&gt;(x))),
  
        })
        }
        this.agentGroupViewInfoForm.valueChanges.subscribe(data =&gt; {
            this.formEdit = true;
            console.log('agentGroupViewInfoForm', this.formEdit)
          })
        }
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="card-body overflow-auto py-0" *ngIf="agentGroupViewInfoForm"
              [formGroup]="agentGroupViewInfoForm"&gt;
                  &lt;ul class="list-group list-group-flush" *ngFor="let child of agentInView"   name="agentInGroup" formArrayName="agentGroupView"&gt;
                    &lt;li class="list-group-item {{isInActiveItems(child) ? 'active' : ''}}" (click)="toggleActiveItem(child)"&gt;
                      {{child.value}}
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
  </code></pre>