Can't bind to 'formGroup' since it isn't a known property of 'form'错误解决方案

项目中引用NG-ZORRO，在使用nz-form时报错Can't bind to 'formGroup' since it isn't a known property of 'form'

component.ts

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'mv-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  validateForm: FormGroup;

  _submitForm () {
    for (const i in this.validateForm.controls) {
      if (i) {
        this.validateForm.controls[ i ].markAsDirty();
      }
    }
  }

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.validateForm = this.fb.group({
      userName: [ null, [ Validators.required ] ],
      password: [ null, [ Validators.required ] ],
      remember: [ true ],
    });
  }

}

  

      

        

          
            
              
            
          
          
Please input your username!
        
      
      

        

          
            
              
            
          
          
Please input your Password!
        
      
      

        

          
            Remember me
          
          Forgot password
          Log in
          Or
          register now!
        
      
    

解决方案：

需要从@angular/forms导入ReactiveFormsModule。因为FormGroupDirective 指令属于ReactiveFormsModule一部分。

导入后的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing.module';

import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot(),
    AppRoutingModule,
    ReactiveFormsModule
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }