Angular开发问题：Can't bind to 'formGroup' since it isn't a known property of 'form'

#Angular开发问题：Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’

问题回顾

在angular开发时候，配置好页面后，页面刷新不显示，控制台打印异常如下：

compiler.js:2426 Uncaught Error: Template parse errors:
Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’. ("<form nz-form [ERROR ->][formGroup]=“validateForm” class=“login-form” (ngSubmit)=“submitForm()”>

<nz-for"): ng:///AppModule/[email protected]:14
No provider for ControlContainer ("[ERROR ->]<form nz-form [formGroup]=“validateForm” class=“login-form” (ngSubmit)=“submitForm()”>
<nz-form-ite"): ng:///AppModule/[email protected]:0

检查发现html中配置了formGroup

原因

Angular使用FormGroup属性需要在AppModule中添加 FormsModule,ReactiveFormsModule

解决方案

AppModule中添加 FormsModule,ReactiveFormsModule

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {NgxEchartsModule} from 'ngx-echarts';
import { UserTalentComponent } from './component/user/user-talent/user-talent.component'
import {NavBarComponent} from './component/system/nav-bar/nav-bar.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,
    NavBarComponent,
    UserTalentComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxEchartsModule,
    NgZorroAntdModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US }],
  bootstrap: [AppComponent]
})
export class AppModule { }