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

Question

我正在 Angular 中创建动态响应表单。但是在下面的代码中，level.name 不被接受，因为编译器不允许在 group() 中提供变量。它只允许固定值，如 - 州、城市等，而不是 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
  }))
});

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

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

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

请帮忙！！！

Answer 1

将下面的行替换为...

level.name

至

级别[名称]

Answer 2

SuryaN，如果你想创建一个带有“动态 FormControl 名称”的 FormGroup，请使用方法 addControl of a FormGroup。我建议创建一个函数，该函数 return 来自名称数组的 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

Answer 3

试试这个：

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

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

Can't set variable as FormControl name when creating Dynamic Reactive Form in Angular

angular

angular-reactive-forms

formarray