如何在FormGroup中将对象属性用作formControlName并解决控件找不到报错

错误根因 #

• 嵌套FormGroup没有在模板中使用formGroupName指令声明层级，Angular无法从根FormGroup定位到嵌套层级下的控件
• 嵌套FormGroup初始化时的属性名、嵌套组内控件名，和模板中绑定的formGroupName、formControlName值不匹配（大小写、拼写不一致）
• 当前组件所在模块未导入ReactiveFormsModule，响应式表单指令未生效

正确实现示例 #

TS逻辑代码 #

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html'
})
export class UserFormComponent {
  // 定义带嵌套结构的响应式表单
  userForm = new FormGroup({
    // 第一层嵌套组：基础信息
    baseInfo: new FormGroup({
      name: new FormControl('', Validators.required),
      age: new FormControl(18)
    }),
    // 第一层嵌套组：联系信息
    contact: new FormGroup({
      phone: new FormControl(''),
      // 第二层嵌套组：地址信息
      address: new FormGroup({
        city: new FormControl(''),
        detail: new FormControl('')
      })
    })
  });
}

HTML模板代码 #

<form [formGroup]="userForm">
  <!-- 绑定第一层嵌套组baseInfo -->
  <div formGroupName="baseInfo">
    <input type="text" formControlName="name" placeholder="姓名">
    <input type="number" formControlName="age" placeholder="年龄">
  </div>

  <!-- 绑定第一层嵌套组contact -->
  <div formGroupName="contact">
    <input type="tel" formControlName="phone" placeholder="手机号">
    <!-- 绑定第二层嵌套组address -->
    <div formGroupName="address">
      <input type="text" formControlName="city" placeholder="所在城市">
      <input type="text" formControlName="detail" placeholder="详细地址">
    </div>
  </div>
</form>

排查清单 #

• 确认所有嵌套FormGroup的外层，都在模板中对应添加了formGroupName指令，指令值和TS中定义的嵌套组属性名完全一致
• 多级嵌套场景下每一层都需要声明对应的formGroupName，不允许跳级绑定
• 检查formControlName的值和对应嵌套组内的控件名完全匹配，无拼写、大小写错误
• 确认当前组件所属的NgModule的imports数组中，已经导入了ReactiveFormsModule

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