Angular 15中TypeError: Cannot read properties of undefined (reading 'controls')错误求助

这个错误的核心原因是：你的模板代码在尝试访问一个未初始化/不存在的 FormGroup 对象的 controls 属性。结合你提到的替换 FormBuilder.group 为 FormControl 后错误依旧的情况，下面是具体排查步骤：

1. 先纠正表单类型误用 #

FormControl 是单个表单控件的实例，本身没有 controls 属性——只有 FormGroup（表单组）才包含 controls 来管理多个子控件。如果你的表单是多字段的，必须用 FormGroup，不能换成 FormControl，这会直接导致模板中访问 controls 时报错。

2. 检查组件类的表单变量 #

• 确保表单变量是公共属性（默认不加 private 就是公共的，模板才能访问到），且明确声明为 FormGroup 类型：

  // 正确写法
  userValue: FormGroup;
  

• 必须在模板渲染前完成初始化：优先在 ngOnInit 或构造函数中用 FormBuilder 创建表单组，比如：

  constructor(private fb: FormBuilder) {}
  
  ngOnInit(): void {
    this.userValue = this.fb.group({
      // 这里定义你的表单字段，比如：
      name: ['', Validators.required],
      age: ['']
    });
  }
  

  不要在异步操作（比如接口请求）后才初始化表单，除非你在模板中做了判断。

3. 检查模板的表单绑定 #

• 模板中 [formGroup] 的绑定变量名必须和组件类中的完全一致，比如组件里是 userValue，模板里就不能写成 userForm：

  <!-- 正确绑定 -->
  <form [formGroup]="userValue">
  

• 避免在表单变量未初始化时访问其 controls 属性，用 *ngIf 做安全判断：

  <!-- 用*ngIf确保userValue存在后再渲染表单 -->
  <form *ngIf="userValue" [formGroup]="userValue">
    <!-- 推荐用formControlName绑定字段，而不是直接访问controls -->
    <input formControlName="name" type="text">
    <!-- 如果一定要访问controls，也要确保安全： -->
    <div *ngIf="userValue.controls.name.invalid">用户名不能为空</div>
  </form>
  

4. 常见错误排查清单 #

• 组件中表单变量名拼写错误（比如组件里是 userForm，模板里写成 userValue）
• 表单变量被声明为 private，导致模板无法访问
• 模板中直接写了 userValue.controls.xxx，但 userValue 还没初始化就被渲染
• 误用 FormControl 代替 FormGroup 来创建多字段表单

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