Nested Headers and Table in Reactive Forms

Question

I have several categories and each category has several materials/products. I have a problem since when i decided to delete a material/product on a category, I also delete a

Answer 1

You need create an array of array. it's easy lose yourself if you haven't careful, but it's some like:

constructor(private fb: FormBuilder) { 
    this.myForm=this.createForm(this.orders);  //I like pass the argument
  }

  createForm(orders:any) //Our form has only an arrayForm "data"
  {
    return this.fb.group(
      {
        data:this.fb.array(this.createOrders(orders))
      }
    )
  }
  createOrders(orders:any)
  {
    //using map, with each "order" we create a formGroup, so we return a formGroup[]
    return orders.map(x=>
    {
      return this.fb.group({  
        id: x.id,
        name: x.name,
        address: x.adress,
        materials:this.fb.array(this.createMaterial(x.materials)) //<--call a function

      })
    })
  }
  createMaterial(materials:any)  //like the above function return a fromGroup[]
  {
    return materials.map(x=>{
      return this.fb.group({material_id: x.id,material_name: x.name, quantity: x.qty})
    })
  }

the template it's like

    

      

        

 
        CATEGORY:   {{ categories[i].name }}  
        

          

            

              

                
Material ID
                
Material Name
                
Qty
                
Action
              
            
            

              

                
{{row.value.material_id}}
                
{{row.value.material_name}}
                
{{row.value.quantity}}
                
  Remove