在Angular中创建动态反应表单时无法将变量设置为FormControl名称答案

【问题标题】：Can't set variable as FormControl name when creating Dynamic Reactive Form in Angular在Angular中创建动态反应表单时无法将变量设置为FormControl名称
【发布时间】：2020-10-22 14:27:14
【问题描述】：

我正在 Angular 中创建动态响应式表单。但是在下面的代码中，level.name 不被接受，因为编译器不允许在 group() 中提供变量。它只允许固定值，例如 - state、city 等，而不是 level.name 变量，其中 level 是一个具有 name 字段的对象...

this.countryNextLevelsBeforeMan.forEach(**level** => {
  let l2 =<FormArray> this.l1FormGroup2.controls["l2"]; 
  l2.push(this.formBuilder.group({
    **level.name** : null   --> compilation error on this line as variable not getting allowed
  }))
});

在 group 方法中，我想将控件名称作为变量 (level.name)。在 for 循环中，如果 level 是 {"name" : "State" , "id" : 2} 那么我想像下面这样设置它，

l2.push(this.formBuilder.group({
        **State** : null    --> No compilation error if we give fixed value
     }))

（我希望它由 level.name 动态分配，而不是“State”，因为 level.name 可以是 City、Street 等）

请帮忙！！！

【问题讨论】：

你想动态设置控制键吗？
是的，你是对的

标签： angular angular-reactive-forms reactive-forms formarray

【解决方案1】：

试试这个：

this.countryNextLevelsBeforeMan.forEach(level => {
  let l2 =<FormArray> this.l1FormGroup2.controls["l2"]; 
  l2.push(this.formBuilder.group({
    [level.name]: null,
    [level.id]: []
  }))
});

【讨论】：

太棒了！它起作用了，你能告诉我们为什么需要使用方括号吗？
谢谢?✌ @Tecayehuatl。这是生成动态密钥的语法：查看更多信息：stackoverflow.com/questions/19837916/…

【解决方案2】：

SuryaN，如果您想使用“动态 FormControl 名称”创建 FormGroup，请使用方法 addControl of a FormGroup。我建议创建一个从名称数组中返回 formGroup 的函数

getFormGroup(names:string[])
{
   const group=new FormGroup({}) //<---create a formGroup empty
   names.ForEach(x=>{
       group.AddControl(x,new FormControl())
   })
   return group;
}

所以你可以像这样调用函数

   const group=this.getFormGroup(this.countryNextLevelsBeforeMan.map(x=>x.name))
   //make what ever you want with the FormGroup

【讨论】：

好的。但是我做的方式是不能设置动态表单控件名称？
顺便说一句，您的建议也很有效。谢谢你的建议。

【解决方案3】：

将下面的行替换为...

级别名称

到

级别[名称]

【讨论】：

没用。 l2.push(this.formBuilder.group({ level[name]: null }))
像下面这样.. this.formBuilder.addcontrol(level[name],new FormControl(null))