Formcontrolname 没有以角度动态附加答案

【问题标题】：Formcontrolname not appending dynamically in angularFormcontrolname 没有以角度动态附加
【发布时间】：2021-08-03 11:30:30
【问题描述】：

我正在使用 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;
}

【问题讨论】：

请以代码块的形式更新您的问题，而不是写评论。
@Akhil，写[formControlName]="form_elem.keyName"。在 Angular 中，如果您使用“绑定”[]，则表示引号之间的部分是变量的值。
so @Eliseo 我应该如何更改 formcontrolname 以获得动态值，我更改了这个值，例如 formControlName="{{form_elem.keyName}}" ，但它仍然无法正常工作
我不知道你的 frmGroup 和你的表单模板（确保你没有类型错误 - 在你的代码中你有 form template 和 form Group （之间有一个空格，确保你需要去掉空格）。顺便说一句。在.html中写<pre>{{frmGroup?.value|json}} {{formTemplate|json}}</pre>以查看变量的值
对不起@eliso我在这里犯了错误，但是表单组和表单模板之间没有空格

标签： angular

【解决方案1】：

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

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

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

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

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

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

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供你参考

【讨论】：