2

I am trying to build a form with a form array, which has multiple drop down menus (all reactive, with value changing according to the option selected in the above select input).

This works pretty well when I am using a regular form group: 

  <div class="form-group">
      <label for="act">Act</label>
      <select id="act" formControlName="act" name="act" class="form-control">
          <option *ngFor="let act of acts" [value]="act.id">{{act.act.name}}</option>
      </select>
  </div>

Here the act array changes on valueChanges of another select option.

However, in a FormArray, this is not working (for obvious reasons, that all nodes of 'act' select option in the FormArray use the same 'act' array).

This is the form array: Form Array

The options for ACT changes when I select LAW like so:

Ex 1

However, when I select a new value for the second Rule, the ACT options are affected throughout all nodes of the array like so:

enter image description here

Is there any way to provide each FormArray node with a new array of options?

Thank you.

Kehkashan Fazal
  • 771
  • 1
  • 6
  • 8
  • It would be great if you could provide a small working example that we can test. I'm not sure if I'm on the right track but for formArray the `*ngFor` should iterate on the explicit controls of the form (https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/, the FormArray in the Template paragraph example). – nicusor Dec 05 '17 at 08:14
  • check this link https://stackoverflow.com/questions/39689049/drop-down-list-in-angular-2-model-driven-form share your complete HTML file and component file for further help – Prithivi Raj Dec 05 '17 at 08:16

0 Answers0