Angular 16报错：无法绑定到'formGroup'，它不是form的已知属性

错误原因及修复步骤 #

1. 确认ReactiveFormsModule的导入有效性 #

你的AppModule已经导入了ReactiveFormsModule，但需确保组件所在的所有模块都正确导入该模块（当前SignUpComponent在AppModule中声明，这一步没问题）。

2. 修正表单控件的拼写错误 #

在sign-up.component.ts的ngOnInit方法中，表单控件名称存在拼写错误：

// 错误写法
this.signupFrom = new FormGroup({
  'Username' : new FormControl(),
  'Passoword' : new FormControl(), // 拼写错误：Passoword → Password
  'Email' : new FormControl()
})

修正后：

this.signupFrom = new FormGroup({
  'Username' : new FormControl(),
  'Password' : new FormControl(),
  'Email' : new FormControl()
})

3. 为输入框绑定formControlName #

模板中的<input>未关联表单控件，需添加formControlName属性与表单控件对应：
首先调整items数组，增加控件名称字段：

items : Array<any> = [
  {name:"username", type:"text", data:"Username", controlName: "Username"},
  {name:"password", type:"password",data:"Password", controlName: "Password"},
  {name:"email", type:"text",data:"Email", controlName: "Email"}
]

然后修改模板：

<input
  type="{{item.type}}"
  class="form-control {{item.name}}"
  id="{{item.name}}"
  placeholder="{{item.data}}..."
  name="{{item.data}}"
  formControlName="{{item.controlName}}"
/>

4. 移除组件中不必要的模块导入 #

组件中无需导入FormsModule和ReactiveFormsModule，这些应在模块级别导入，组件仅需导入表单类：

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

额外优化建议 #

• 变量名signupFrom建议改为signupForm，符合命名规范；
• 使用FormBuilder简化表单创建：

ngOnInit(): void {
  this.signupForm = this.formBuilder.group({
    Username: [''],
    Password: [''],
    Email: ['']
  });
}

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