使用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的文档就动手实践了，知识体系不连贯导致出现了这个问题

转载于:https://www.cnblogs.com/Mxy-cnblog/p/10032929.html