如何根据用户输入添加formcontrol名称

Question

我的意图是创建一个JSON对象，如图像中所示，其中包含8种形式的角度

issue是控件名称，由用户使用text input（零售，批发，批发_2等）定义，这将依次包含单位和价格的formArrays，用户可以自由添加任意数量的单位-价格要素。

到目前为止，我可以通过单击图像中的[+]（但只有一个橙色块）来添加单价分组。如何使其动态化

  prodid = null;
  prodgroup: FormGroup;
  unitprices: FormArray;
  pgcontainers =[];
  constructor(private activatedRoute: ActivatedRoute,private fb: FormBuilder) {}

  ngOnInit() {
    this.prodgroup = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(4)]),
      image: new FormControl('', [Validators.required]),
      pgroup: this.fb.array([this.pricegroup()]),
      unitprices:  this.fb.array([this.unitprice()])
    })
  }


  addunitpriceClick(): void{
    this.unitprices = this.prodgroup.get('unitprices') as FormArray;
    this.unitprices.push(this.unitprice());
  }
  unitprice(): FormGroup{
    return this.fb.group({
      unit:['',[Validators.required] ],
      price:['',[Validators.required] ]
    })
  }

Answer 1

使用addControl将formcontrol动态添加到反应形式。

定义组件中的文本输入并使用ngModel

在Component.ts

textInput: string;

addFormControl() {
    this.prodgroup.addControl(textInput, this.fb.array([this.unitprice()]));
}

Answer 2

Disclamer：这不仅仅是一个建议

您没有有效的JSON，我建议您使用JSON

{
  name:...
  imagen:...
  detail:[
     name:...
     prices:[
        {
         unit:...,
         price:...
        }
     ]
  ]
}