如何动态创建FormControl名称？基于数组生成Angular动态表单控件求助

我来帮你搞定这个表单结构的问题～你现在的核心需求是把products数组转化为表单里的一个对象型控件组，而不是数组型的FormArray，原代码里的写法刚好搞反了，我给你修正一下：

问题分析 #

你期望products是一个包含AAA、BBB作为key的FormGroup，但原代码里误用了FormArray，而且map里的逻辑也有问题，导致无法生成你想要的结构。

修正后的代码 #

ngOnInit() { 
  // 1. 先构建products对应的FormGroup
  const productsFormGroup = this.fb.group({});
  this.products.forEach(product => {
    // 以每个产品的name作为控件名，创建空的FormControl
    productsFormGroup.addControl(product.name, new FormControl(''));
  });

  // 2. 构建主表单
  this.form = this.fb.group({ 
    SelectAll: new FormControl(''), 
    genericTextBox: new FormControl(''), 
    dateRangeTO: new FormControl('', [Validators.required]), 
    dateRangeFrom: new FormControl('', [Validators.required]), 
    products: productsFormGroup // 把刚才的products控件组加入主表单
  }); 
}

验证结果 #

当你执行console.log(this.form.value)时，就能得到你期望的结构：

{ 
  "genericTextBox": "", 
  "dateRangeTO": "", 
  "dateRangeFrom": "", 
  "SelectAll": "", 
  "products": { 
    "AAA": "", 
    "BBB": "" 
  } 
}

额外说明 #

如果之后需要给产品控件设置默认值（比如用到数组里的selected字段），只需要把new FormControl('')改成new FormControl(product.selected)就可以了，非常灵活。

内容的提问来源于stack exchange，提问作者user8837476