CODEWITHSUNDEEP
angulartypescriptmultidimensional-arrayangular-reactive-formsangular-forms
JordanBarber
JordanBarber

Reputation: 2101

Add Nested Reactive FormArray within FormArray - Angular 6

I am attempting to add multiple inputs inside of a table row using nested Reactive Forms in Angular 6. I am having trouble pushing to a Form Array within a Form Array in typescript. I have added my full code (including a dummy service to pull in data) to a stackblitz here

How can I implement adding to the productCombination form array inside of my addProductCombination() method. The desired behavior is that the table row in which the 'plus' button is clicked will have a new select/input element for each form control inside of my productCombination FormArray. Any help is much appreciated.

Upvotes: 0

Views: 663

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

You can get an AbstractFormControl instance from a FormArray using the at method on it.

So here's how you can break down the things that you'll have to do:

  1. Get the records FormArray from your Reactive Form.
  2. Call the at method on it this FormArray and pass it the index that you want to get the AbstractControl instance from. I've used 0 for example.
  3. This will yield the AbstractControl instance inside which, you have the productCombination FormArray. So you'll now need to have access to that. That's what (<FormArray>formControl.get('productCombination')) is doing.
  4. Once you get the inner FormArray, you can call the push method on it and pass it the AbstractControl instance you want to add to it.

So in code, it would look something like:

addProductCombination() {
  let formControl = ( < FormArray > this.productBlendCodeForm.get('records')).at(0);
  ( < FormArray > formControl.get('productCombination')).push(this.initProductCombinations({}));
}

Upvotes: 1

Related Questions