angular2 formbuilder - Angular 2 Reactive Forms - Binding select drop down value in form array of a reactive form -

i have created reactive form has form array. form group pushed form array on button click. every button click generates section of html on screen.

this form group contains 2 drop down lists having parent-child relation i.e. selection of item in parent drop down decides values populated in child drop down.

when select value in parent drop down change event fetches results child has limited scope of specific form array element. change event fetches data , sets values child drop downs in each form array element. basic structure of mark up

<form [formgroup] = "mainform" (ngsubmit)="savedata()"> <div>some form control</div> <div formarrayname = "myarray" *ngfor="let arrayitem of myarray.controls";let = index"> <div [formgroupname] = "i"> <div>  <select class="form-control" (change)="onselect($event.target.value)" id="{{'header' + i}}" formcontrolname="parentdrpdown">  <option value="" disabled selected hidden>select parent...</option>  <option *ngfor="let pitem of parentdrpdown"          value={{pitem.id}}>          {{pitem.name}}  </option>  </select> </div> <div>  <select class="form-control" (change)="onselect($event.target.value)" id="{{'header' + i}}" formcontrolname="childdrpdown">  <option value="" disabled selected hidden>select child...</option>  <option *ngfor="let citem of childdrpdown"          value={{citem.id}}>          {{citem.name}}  </option>  </select> </div> </div>     </div>  constructor(private fb:   formbuilder, private _segservice: segmentservice) {     this.parentdrpdown= this._segservice.getparentvalues();  onselect(pid) {     this.childdrpdown= this._segservice.getchildsegment()         .filter((item) => item.parentid == pid);  } 

parentdrpdown , childdrpdown properties declared in component , loaded values using http request web server