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

Question

I have created a reactive form which has a form array. A Form Group is pushed into the form array on a button click. So every button click generates a 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 to be populated in child drop down.
When I select a value in parent drop down change event fetches results for child but this has to be limited to the scope of the specific form array element. Currently change event fetches data and sets values for child drop downs in each form array element. This is a basic structure of my mark up
<form [formGroup] = "mainForm" (ngSubmit)="savedata()">
<div>some form control</div>
<div formArrayName = "myArray" *ngFor="let arrayitem of myArray.controls";let i = 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 a 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 a 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 and childdrpdown are properties declared in component and they are loaded with values using http get request to a web server

Answer 1

Use below snippet for the code in reactive form in case of select tag.
<h1>My Application</h1>
<select formControlName="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>