使用angular 6 +ng-zorro-antd中的 Form表單 控制檯報錯

錯誤代碼：

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-form-item>
       "): ng:///AppModule/LoginComponent.html@1:18
No provider for ControlContainer ("
    [ERROR ->]<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form"): ng:///AppModule/LoginComponent.html@1:4
No provider for NgControl ("
        <nz-form-control>
          <nz-input-group [nzPrefix]="prefixUser">
            [ERROR ->]<input type="text" nz-input formControlName="userName" placeholder="Username">
          </nz-input-g"): ng:///AppModule/LoginComponent.html@5:12
...
//後面還有一堆錯誤

執行過程

在vscode的集成終端裏 執行 ng new project 後 ng add ng-zorro-antd
以後利用 ng-zorro-antd 的表單建立了一個組件ng g ng-zorro-antd:form-normal-login -p app --styleext=less --name=login

ng new project
 ng add ng-zorro-antd
 ng g ng-zorro-antd:form-normal-login -p app --styleext=less --name=login

在配置好了路由以後，運行項目，就出現了一開始的問題

解決辦法

在app.module.ts裏除了FormsModule還要引入ReactiveFormsModule

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
//放入import 數組裏
import:[
    ...
        ReactiveFormsModule
    ...
]

總結

用到了響應式表單，須要引入ReactiveFormsModule才行，由於沒有看完Angular的文檔就動手實踐了，知識體系不連貫致使出現了這個問題