项目中引用NG-ZORRO，在使用nz-form时报错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 ],});}}

  <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()"><div nz-form-item><div nz-form-control [nzValidateStatus]="validateForm.controls.userName"><nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'"><ng-template #prefix><i class="anticon anticon-user"></i></ng-template></nz-input><div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div></div></div><div nz-form-item><div nz-form-control [nzValidateStatus]="validateForm.controls.password"><nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'"><ng-template #prefix><i class="anticon anticon-lock"></i></ng-template></nz-input><div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div></div></div><div nz-form-item><div nz-form-control><label nz-checkbox formControlName="remember"><span>Remember me</span></label><a class="login-form-forgot" class="login-form-forgot">Forgot password</a><button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'">Log in</button>Or<a href="">register now!</a></div></div></form>

解决方案：

需要从@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 { }

项目中引用NG-ZORRO，在使用nz-form时报错Can't bind to 'formGroup' since it isn't a known property of 'form'的解决方案相关推荐

angular7中引用ng zorro antd的三种方式
在新版本的angular中使用新的ng zorro,按照官方文档一步一步来,没有报错,但是也没有反应. 试了一下官方的两种方式,第一种方式如果使用cnpm会报错,第二种方式会没有反应,也是因为使用了c ...
Android Studio 在项目中引用第三方jar包
在Android Studio项目中引用第三方jar包的方法: 步骤: 1.在build.gradle文件中添加如下代码: 备注:要添加在Android作用域下 sourceSets {main {j ...
在vue项目中引用element-ui时让el-input 获取焦点的方法
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了element-ui 在网上查找了很多方法, 但是在实际使用中发现了一个问题无论是使用$ref获取 ...
如何在SharePoint 2010项目中引用UserProfiles.dll
如果需要进行SharePoint的UserProfile开发的话,我们需要引用以下程序集: C:\Program Files\Common Files\Microsoft Shared\Web Ser ...
react前端显示图片_如何在react项目中引用图片？
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
在vue项目中引用萤石云播放器插件
在vue项目中引用萤石云播放器插件 1. 萤石云官方开发文档: https://open.ys7.com/help/31 2. 登录官方网站:https://open.ys7.com/cn/s/ind ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
antvg2 环图轮播_在vue项目中引用Antv G2,以饼图为例讲解
我就废话不多说了,大家还是直接看代码吧~ npm install @antv/g2 --save template内容: js部分: //引入G2组件 import G2 from "@a ...

项目中引用NG-ZORRO，在使用nz-form时报错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'的解决方案相关推荐

最新文章

热门文章