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

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

Deepak Goel · Accepted Answer · 2017-11-01 17:57:57Z

2

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>

answered Nov 1, 2017 at 17:57

Deepak Goel

5,6846 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pardeep Jain Over a year ago

where is the concept of parent child dropdown here?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related