angular 4 nested formArray Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'

[mamesaye kane]

I **cannot push** to an array.

I have a segment(id, time) that can have one or several people (role, infos). The field are generated dynamically. On load the page shows the fields (see image below).    

   

   

When try to add a segment I get error : `ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'`   

Here is code from the .ts file:   

   

    addSegment() {

  let segmentRows3 = this.mySummaryForm.get('segmentRows3') as FormArray;

  segmentRows3.push(this.fb.array([

this.fb.group({

segmentTime3: '',

segmentId3: '',  

      personRows3: this.fb.array([

this.fb.group({

     personR3: '',

     personI3: ''

      })

  ])

    })

  ]));

      }   

   

  segmentRows3: this.fb.array([

this.fb.group({

segmentId3: '',

  segmentTime3: '',

      personRows3: this.fb.array([

this.fb.group({

     personR3: '',

     personI3: ''

      })

  ])

    })

  ]),

The .html code   

   

    <div formArrayName="segmentRows3">

      <label><h2>New segment</h2></label>

    <div *ngFor=" let segmentRow of mySummaryForm.controls.segmentRows3.controls; let i=index " > 

    <div  class="form-group" [formGroupName]="i" >   {{i+1}}

        <label for="segmentId3">Segment ID

        <select formControlName="segmentId3" placeholder="pick" type="text" id="segmentId3" class="form-control" [(ngModel)]="levelNumSegment3" (ngModelChange)="toNumberSegment3()">

            <option *ngFor="let level of segmentId" [value]="level.num">{{level.name}}</option>

        </select> 

        </label>      

        <label for="segmentTime3">Segment time

        <input formControlName="segmentTime3" type="text" id="segmentTime3" class="form-control" placeholder="select a time" (ngModelChange)="onChange($event)">

        </label>

        <button type="button" (click)="addPerson(i)" class="btn btn-info">Add a person</button><br><br>

    <div formArrayName="personRows3">

<div *ngFor=" let personRow of segmentRow.controls.personRows3.controls; let j=index " >

<div  class="form-group" [formGroupName]="j" >   {{j+1}} 

  <label for="personR3">person Role 

        <input formControlName="personR3" [typeahead]="personRole" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personR3" class="form-control" placeholder="select a role" (ngModelChange)="onChange($event)" >

        </label>

        <label for="personI3">Person infos

        <input formControlName="personI3" [typeahead]="states" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" type="text" id="personI3" class="form-control" placeholder="select infos" (ngModelChange)="onChange($event)" >

        </label>

        <label><span (click)="deletePerson(j)" class="btn btn-danger">Remove</span></label><br><br>

    </div>    

      </div>

</div>

        </div>        

      </div>

  </div>

  <br><button type="button" (click)="addSegment()" class="btn btn-primary">Add a segment</button>   

   

When i try to add it adds the segment(id, time) but not the person (role, infos) unlike on load (image below),

 and throws error : `ERROR TypeError: Cannot find control with path: 'segmentRows3 -> 1 -> segmentId3'`   . Why?      

      

   

   

[Sander Elias]

Hi Mamesaye,

Can you make a stackblits that shows your issue please, that is too much code to interpret mentally! 

Regards

Sander

[Sander Elias]

Oh, nevermind, you are pushing an array into the array, and that is the problem.

Regards

Sander

[mamesaye kane]

adding FormArray to segmentRow3 array while my template expects only FormGroup:

So, try changing it to:

segmentRows3.push(

  this.fb.group({
    segmentTime3: '',
    segmentId3: '',
    personRows3: this.fb.array([
      this.fb.group({
        personR3: '',
        personI3: ''
      })
    ])
  })

);

fix the error.

Thanks