反应形式的嵌套标题和表格 [英] Nested Headers and Table in Reactive Forms

问题描述

我有几个类别，每个类别有几个材料/产品.我有一个问题，因为当我决定删除一个类别的材料/产品时，我也删除了另一个类别的材料/产品?如何使用反应式形式解决这个问题?我如何单独删除一种材料而不是另一种材料?这是我的代码链接代码链接

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 material/product in another category? How would able to fix this using reactive forms? How would i independently delete one material only and not another? This is the link to my code CODE LINK

patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
      rows.push(this.fb.group({material_id: x.id,material_name: x.name, quantity: x.qty}))
    })
      })

  }

  onDeleteRow(rowIndex) {
    let rows = this.myForm.get('rows') as FormArray;
    rows.removeAt(rowIndex)
  }

推荐答案

嗯，思路是一样的，

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

      })
    })
  }

这篇关于反应形式的嵌套标题和表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！