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

叁歲伎倆 2021-09-28 04:18 168阅读 0赞

\#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/LoginComponent.html@0:14  
No provider for ControlContainer ("\[ERROR ->\]<form nz-form \[formGroup\]=“validateForm” class=“login-form” (ngSubmit)=“submitForm()”>  
<nz-form-ite"): ng:///AppModule/LoginComponent.html@0:0

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]

## 检查发现html中配置了formGroup ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]

## 原因 ##

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 {  }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]: /images/20210923/1f97cb7db6f84f4a8516017d7e37f39f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]: /images/20210923/83520d33005140d9a33c988d79ad6a72.png