Angular 15+特性模块中formGroup绑定报错求助

以下是针对该问题的排查和解决步骤：

• 确认特性模块的表单模块导入完整
  确保HomeModule中同时导入FormsModule和ReactiveFormsModule，并将它们添加到@NgModule的imports数组内——ReactiveFormsModule是提供formGroup指令的核心模块，缺一不可。示例代码：

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HomeComponent } from './home.component';
  
  @NgModule({
    declarations: [HomeComponent],
    imports: [
      CommonModule,
      FormsModule,
      ReactiveFormsModule
    ]
  })
  export class HomeModule { }
  

• 检查组件是否归属特性模块
  确保使用formGroup的组件（比如HomeComponent）已经在HomeModule的declarations数组中注册。如果组件未被特性模块声明，Angular会默认将其归为根模块管辖，此时若根模块未导入表单模块就会触发报错。

• 确认根模块已导入特性模块
  根模块AppModule必须显式导入HomeModule，否则特性模块的配置（包括表单模块的指令）不会生效。示例代码：

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  import { HomeModule } from './home/home.module';
  
  @NgModule({
    declarations: [AppComponent],
    imports: [
      BrowserModule,
      HomeModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

• 验证组件类与模板的绑定一致性
  确保组件类中正确初始化了FormGroup实例，模板中的[formGroup]绑定名称与类中的实例变量完全一致。比如组件类：

  import { Component } from '@angular/core';
  import { FormGroup, FormControl } from '@angular/forms';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html'
  })
  export class HomeComponent {
    loginForm = new FormGroup({
      username: new FormControl(''),
      password: new FormControl('')
    });
  }
  

  对应模板：

  <form [formGroup]="loginForm">
    <input formControlName="username" placeholder="Username">
    <input formControlName="password" placeholder="Password">
    <button type="submit">Submit</button>
  </form>
  

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