Angular响应式表单动态绑定formControlName不生效、提交值为空求助

错误点汇总 #

• 模板中动态绑定formControlName未使用方括号语法：当前写法formControlName="form_elem.keyName"会将字符串字面量form_elem.keyName作为控件名，而非读取变量值，导致绑定失效。
• 模板插值语法错误：label内容写为{form_elem.keyName}}，缺少左侧大括号，导致文本渲染异常。
• ngSwitch语法不完整：仅写了[ngSwitchCase]，缺少外层的[ngSwitch]容器声明，分支判断逻辑无法生效。
• FormGroup初始化逻辑错误：使用this.fb.group({group})会创建嵌套结构，顶层仅存在group控件，你需要的所有表单控件被嵌套在该控件下，和模板绑定的层级不匹配。
• 非法修改FormGroup只读属性：this.frmGroup.controls=this.frmGroup.controls.group.value是完全错误的写法，controls为FormGroup的只读属性，直接赋值会破坏表单结构，该行代码完全不需要。

修复后代码 #

HTML模板 #

<form [formGroup]="frmGroup"> 
  <div *ngFor="let form_elem of formtemplate">
    <!-- 补充ngSwitch外层声明 -->
    <div [ngSwitch]="form_elem.keyType">
      <div *ngSwitchCase="'TEXTBOX'"> 
        <div class="col-lg-4">
          <label for="{{form_elem.keyName}}" class="col-form-label"> 
            <!-- 修复插值语法 -->
            {{form_elem.keyName}}
          </label>                                        
          <!-- 用方括号绑定动态formControlName -->
          <input 
            type="text" 
            class="form-control" 
            autocomplete="off" 
            [formControlName]="form_elem.keyName"                                  
            id="{{form_elem.keyName}}"
          >                                    
        </div>
      </div>
    </div>
  </div>
</form>

组件TS代码 #

if(this.formtemplate.length>0){
  // 初始化存储控件配置的对象
  const group: {[key: string]: FormControl} = {};
  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('');  
  // 直接传入group对象，不要包裹大括号
  this.frmGroup = this.fb.group(group);
  // 删除原错误的controls赋值代码即可
}

内容的提问来源于stack exchange，提问作者Akhil