angular使用表单form绑定formGroup属性报错：Can't bind to 'formGroup' since it isn't a known property of 'form'

报错描述

在使用form表单的绑定formGroup属性时，报了个模板解析错误：

Uncaught Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'
           

如图所示：

html模板代码如图所示：

注: 其中用的是NG-ZORRO组件样式库。

原因分析

如果是在使用form时，使用了formGroup和formControlName，则需要引入ReactiveFormsModule，否则会报错。

解决方案

需要在app.module.ts中引入ReactiveFormsModule，如果是懒加载，则按需在各自的module中引入，我们在展示在app.module.ts中的引入，其他module中相同：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import { LoginComponent } from './login/login.component';

registerLocaleData(en);

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgZorroAntdModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule //引入ReactiveFormsModule 
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US }],
  bootstrap: [AppComponent]
})
export class AppModule { }

           

结语

希望能够解决大家工作和学习中的一些疑问，避免不必要的时间浪费，有不严谨的地方，也请大家批评指正，共同进步！

转载请注明出处，谢谢！

交流方式：QQ1670765991