在 Angular 中创建动态响应式表单时，无法将变量设置为 FormControl 名称

Question

我正在 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
     }))

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

请帮忙！！！

Answer 1

尝试这个：

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