title: Angular Reactive Forms, way to bind data object with every object of FormArray
body: <p>I am building reactive form like the pic shown below- </p>
  
  <p>As shown in pic every file (referred as attachment in code) have multiple agendas in them. Agendas could be added, updated and deleted</p>
  
  <p><a href="https://i.stack.imgur.com/6kYCV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6kYCV.png" alt="enter image description here"></a></p>
  
  <pre><code>buildForms() {
  this.agendaForms = this.formBuilder.group({
    attachements: this.formBuilder.array([
  
    ])
  });
  </code></pre>
  
  <p>Form data is fetched from webservice and form model is created this way-</p>
  
  <pre><code>data =&gt; {
      this.submission = data;
  
      // New blank agenda for all attachements
      if (
        !isNullOrUndefined(this.submission) &amp;&amp;
        !isNullOrUndefined(this.submission.attachments)
      ) {
        this.submission.attachments.forEach(attachment =&gt; {
          const agenda = new NLAgenda();
          agenda.dwgNo = attachment.filename;
          agenda.dWGNo = attachment.filename;
          this.submission.agendas.push(agenda);
  
          if (!isNullOrUndefined(attachment)) {
            attachment.agendas = this.getAgendasForAttachment(attachment);
  
            if (!isNullOrUndefined(attachment.agendas)) {
              this.attachmentFormArray = this.agendaForms.controls
                .attachements as FormArray;
              this.attachmentFormArray.push(
                this.createAttachmentAgendasControl(attachment.agendas)
              );
            }
          }
        });
      }
    }
  </code></pre>
  
  <p>Templates look something like this</p>
  
  <pre><code>&lt;form [formGroup]="agendaForms"&gt;
      &lt;div formArrayName="attachements"&gt;
        &lt;div *ngFor="let attachmentFormGroup of attachmentFormArray.controls;
            let attachmentId = index"&gt;
  
          &lt;!-- Attachment header--&gt;
          &lt;div&gt;
            &lt;!-- File Name--&gt;
            &lt;div&gt;
              {{ submission.attachments[attachmentId].filename }}
            &lt;/div&gt;
  
            &lt;!-- Action Buttons--&gt;
            &lt;div&gt;
              &lt;input type="button" value="Link To"/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Agendas --&gt;
          &lt;div formGroupName="{{ attachmentId }}"&gt;
            &lt;div formArrayName="agendas"&gt;
              &lt;div *ngFor="let agendaFormGroup of attachmentFormGroup.controls.agendas.controls;
                  let agendaId = index"&gt;
                &lt;div formGroupName="{{ agendaId }}" &gt;
                  &lt;mat-form-field&gt;
                    &lt;input
                      type="text"
                      id="project"
                      placeholder="Sheet No."
                      formControlName="sheetNumber"
                      matInput
                    /&gt;
                    &lt;!-- &lt;mat-error&gt;{{ getErrorMessage(f.project) }}&lt;/mat-error&gt; --&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                    &lt;input
                      type="text"
                      id="project"
                      placeholder="Title"
                      formControlName="title"
                      matInput
                    /&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                    &lt;input
                      type="text"
                      id="project"
                      placeholder="Description"
                      formControlName="description"
                      matInput
                    /&gt;
                  &lt;/mat-form-field&gt;
  
                  &lt;div&gt;
                    &lt;a
                      matTooltip="Add Agenda"
                      aria-label="Add Agenda"
                      (click)="
                        createOrUpdateAgenda(
                          submission.attachments[attachmentId].agendas[agendaId],
                          attachmentId,
                          agendaId
                        )"&gt;
                      &lt;i class="fa fa-check"&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;a
                      *ngIf="submission.attachments[attachmentId].agendas[agendaId].created != null &amp;&amp; submission.attachments[attachmentId].agendas[agendaId].created != undefined"
                      matTooltip="Delete Agenda"
                      aria-label="Delete Agenda"
                      (click)="deleteAgenda(submission.attachments[attachmentId].agendas[agendaId])"&gt;
                      &lt;i class="fa fa-remove"&gt;&lt;/i&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p><strong>Problem:</strong>
  Whenever agendas are added or updated I refetch submission object data from server to show updated state of files and agendas, submission object changes and gives errors in console like "Cannot read property 'agendas' of undefined" since in new submission object position of old objects is changed due to new addition or deletion</p>
  
  <p>I believe I need to build template only using one array (FormArray) and not two arrays (Form array and Submission Object), else if one changes till other changes console will throw error. But how to use only FormArray, I have some data in Submission Object? Is there a way to bind submission object with FormArray?</p>
  
  <p>I tired <a href="https://github.com/angular/angular/issues/13845" rel="nofollow noreferrer">https://github.com/angular/angular/issues/13845</a> but didn't succeed as I am using form build and didn't know how to do this trick with form builder</p>