Nested Array Form (Angular2)

Question

i'am creating nested form array that structured like this

the form got an error when i want to add array into objects

here is the plnkr

if you have difficulty to understand,please tell me.

Answer 1

The only error you seem to have in your plunker, is the iteration of the surveys array, instead of:

*ngFor="let survey of myForm.controls.objects.controls; let j=index"

it should be:

*ngFor="let survey of object.controls.surveys.controls; let j=index"

where object refers to the iterations of objects form array in the higher level iteration.

So now when clicking Line End button in the Survey tab is working fine, see the forked Plunker

Answer 2

See Your code the error states that the surveys object is not binded while looping.You need to loop properly in HTML .Check the below code

     <div *ngFor="let item of formvalue.objects; let i=index">
    <ul>
       <li>{{item.date}}</li>
    </ul>
    <div *ngFor="let survey of item.surveys ; let j=index">
    <ul>
      <li>{{survey.br_0}} </li>
    </ul>
  </div>
  </div>