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

Well, the idea is the same,

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

      })
    })
  }