Formcontrolname 不以角度动态附加

如何解决Formcontrolname 不以角度动态附加

我正在使用 Angular 反应式表单，并在 html 中循环遍历将动态名称绑定到 formcontrolname 的对象数组，当我在输入时检查表单控件名称时，它没有显示。

当我通过在输入字段中输入值来提交表单时，frmgrp.value 为空值， 请帮忙解决问题

 <form [formGroup]="frmGroup"> 
 <div *ngFor="let form_elem of formtemplate">
 <div [ngSwitchCase]="form_elem.keyType">
    <div *ngSwitchCase="'TEXTBox'"> 
   <div class="col-lg-4">
    <label for="{{form_elem.keyName}}" class="col-form-label"> 
    {form_elem.keyName}}</label>                                        
     <input type="text" class="form-control" autocomplete="off" 
     formControlName="form_elem.keyName"                                  
          id="{{form_elem.keyName}}">                                    
         </div>
          </div>
           </form>
  if(this.formtemplate.length>0){
  this.formtemplate.forEach((val:any) => {
    val.keyName=val.keyName.replace(/\s/g,"");
  });
 this.formtemplate.forEach((val:any)=>{
   group[val.keyName]=new FormControl('');  
 });
 group['id']=new FormControl('');  
 this.frmGroup = this.fb.group({group})
 this.frmGroup.controls=this.frmGroup.controls.group.value;
}

解决方法

你有很多错误，我什至不知道你的模板将如何编译。 ngSwitch 实现错误，您在标签上缺少 {，而 formControlName="form_elem.keyName" 应该是 [formControlName]="form_elem.keyName"，因为您正在绑定一个变量。

TS 看起来不错，最大的禁忌在这里：

this.frmGroup.controls = this.frmGroup.controls.group.value;

您正在为表单组分配一个常规的 javascript 对象。你不能这样做，它们不是表单控件，只是一个简单的 javascript 对象。

group 似乎包含您所有的表单控件，因此您可以使用展开运算符将它们添加到您的表单中...现在您有了一个带有表单控件的表单组。但是您真的不需要group，只需将控件直接添加到您的表单组中即可。

考虑到我提到的所有内容，您的代码应该如下所示：

constructor(private fb: FormBuilder) {
  if (this.formtemplate.length) {
    this.frmGroup = this.fb.group({})
    this.formtemplate.forEach((val: any) => {
      this.frmGroup.addControl(val.keyName,this.fb.control(''));
    })
  }
}

模板：

<form [formGroup]="frmGroup" *ngIf="frmGroup">
  <div *ngFor="let form_elem of formtemplate">
    <div [ngSwitch]="form_elem.keyType">
      <div *ngSwitchCase="'TEXTBOX'">
        <label>{{form_elem.keyName}}</label>
        <input type="text" [formControlName]="form_elem.keyName">
      </div>
    </div>
  </div>
</form>

另外，不要使用any。输入您的数据，我们正在使用 TypeScript ;)

一个STACKBLITZ供您参考