[AngularJS] 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).    

<https://lh3.googleusercontent.com/-wIloX80T8y0/WukZr7YxRZI/AAAAAAAAoTU/RxLQkHphc-US9Dj_V_YkXbH6GpMOHK_FACLcBGAs/s1600/pQtuY.png>
   
   
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),

<https://lh3.googleusercontent.com/-TZFOgPbwzQU/WukZy8bydqI/AAAAAAAAoTY/ZOdc8Rti3cscJzKCQDGpOSxcdfn4SBf_ACLcBGAs/s1600/IqXHN.png>

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



   

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.