CODEWITHSUNDEEP
angularangular-reactive-forms
Niranjan
Niranjan

Reputation: 87

Dynamically creating a FormArray of FormArray based on the JSON data

I am trying to create a formGroup in which one control is a formArray which inturn holds form arrays. It should look something like

this.storageForm = new FormGroup({
  FLOOR:new FormControl("", Validators.required),    // Will receive only 1 floor
  AISEL:new FormControl("", Validators.required),    // Will receive only 1 Aisel

  STACKS: new FormArray([ new FormArray([]) ]),      // Nested FormArray is an array of pallets
});

The form is dynamically structured based on the data that is received from the database. Below is the sample data.

{
"FLOOR": 
    {           
        "NAME": "FLOOR_1",
        "AISEL": 
            {
                "NAME": "AISEL_1",
                "STACKS": [
                    {
                        "NAME": "STACK_1",
                        "PALLETS": [
                            {
                                "NAME": "PALLET_1"
                            },
                            {
                                "NAME": "PALLET_2"
                            }
                        ]
                    },
                    {
                        "NAME": "STACK_2",
                        "PALLETS": [
                            {
                                "NAME": "PALLET_3"
                            },
                            {
                                "NAME": "PALLET_4"
                            }
                        ]
                    }
                ]
            }
        
      }
    
 }

I am able to add new formArrays to STACKS but not able to figure out how to add new formArray

Below is what I tried

     this.stacks.forEach((stack,index) =>{
        (this.storageForm.get('STACKS') as FormArray).push(new FormArray([]));
        if(stack.PALLETS) {
           stack.PALLETS.forEach(pallet=>{
              ((this.allocationForm.get('stackArray') as FormArray)[index]).push(new FormArray([]));
        })
      }

Upvotes: 1

Views: 1120

Answers (1)

Niranjan
Niranjan

Reputation: 87

I coded the solution myself. First, I created the form group as below

this.allocationForm = new FormGroup({
   FLOOR:new FormControl("", Validators.required),
   AISEL:new FormControl("", Validators.required),
   stackArray: new FormArray([]),
});

Looped through the list of stacks and pushed a formArray for each stack. If that stack has a list of pallets, pushing a formArray inside the stack formArray, I looped on pallets and dynamically pushed form control for each pallet

this.stacks.forEach((stack,index)=>{
      (this.allocationForm.get('stackArray') as FormArray).push(new FormArray([]));
      if(stack.Pallets) {
        stack.Pallets.forEach((pallet,index)=>{
          ((this.allocationForm.get('stackArray') as FormArray)
            .controls[index] as FormArray).push(new FormControl(index));
        })        
      }   
    })

This nesting looks like

FormGroup [ FormArray [ FormArray [ Form control ] ] ]

Upvotes: 1

Related Questions