Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'
错误描述
当form表单加FormGroup属性时报错 Can't bind to 'formGroup' since it isn't a known property of 'form'
<form nz-form [formGroup]="valForm" (ngSubmit)="submit()" role="form">
<div nz-form-item>
<div nz-form-control [nzValidateStatus]="valForm.controls.email">
<nz-input formControlName="email" [nzPlaceHolder]="'邮箱'" [nzSize]="'large'">
<ng-template #suffix>
<i class="anticon anticon-mail"></i>
</ng-template>
</nz-input>
<div nz-form-explain *ngIf="valForm.controls.email.dirty&&valForm.controls.email.hasError('required')">邮箱必填</div>
</div>
</div>
<div nz-form-item>
<div nz-form-control [nzValidateStatus]="valForm.controls.password">
<nz-input formControlName="password" [nzPlaceHolder]="'密码'" [nzType]="'password'" [nzSize]="'large'">
<ng-template #suffix>
<i class="anticon anticon-lock"></i>
</ng-template>
</nz-input>
<div nz-form-explain *ngIf="valForm.controls.password.dirty&&valForm.controls.password.hasError('required')">密码必填</div>
</div>
</div>
<div nz-form-item nz-row>
<div nz-col [nzSpan]="12">
<label nz-checkbox formControlName="remember_me">
<span>记住密码</span>
</label>
</div>
<div nz-col [nzSpan]="12" class="text-right">
<a [routerLink]="['/forget']">注册</a>
</div>
</div>
<div nz-form-item nz-row>
<div nz-col [nzSpan]="24">
<button nz-button [disabled]="!valForm.valid" [nzType]="'primary'" [nzSize]="'large'" class="ant-btn__block">
<span>登录</span>
</button>
</div>
</div>
</form>
原因分析与解决方案
在使用form表单时,如果用到了form-group与formControlName,需要在app.module.ts中的import引入的不仅仅有FormsModule,还要引入ReactiveFormsModule。如果是懒加载,则按需在各自的module中引入。如下:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { LoginComponent } from './login/login.component'; @NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
declarations: [
LoginComponent
],
providers: [
]
})
export class AccountModule { }
Angular 报错 Can't bind to 'formGroup' since it isn't a known property of 'form'的更多相关文章
- Can't bind to 'formGroup' since it isn't a known property of 'form'
在APP.module.ts中引入FormsModule, ReactiveFormsModule. import { BrowserModule } from '@angular/platform- ...
- 运行tomcat,报错:Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误
运行tomcat时,报错: Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误 原因分析: 这是因为之前已开启了一 ...
- idea 报错javax/xml/bind/DatatypeConverter
idea 报错javax/xml/bind/DatatypeConverter java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeCon ...
- (前端)angular报错日常以及记录日常
目录1 json的key...value问题 遍历json的key...value的时候报错: [tslint] for (... in ...) statements must be filtere ...
- Angular报错
报错: Module 'App' is not available! You either misspelled the module name or forgot to load it. If re ...
- fiddler启动报错Unable to bind to port [8888],ErrorCode:10106
启动运行fiddler 报错,提示Unable to bind to port [8888],ErrorCode:10106 解决方式: 使用Fiddler或其他类似的监听工具出现这种错误时, Una ...
- angular 报错笔记
1.错误信息: Failed to instantiate module app due to: Error: [$injector:unpr] http://errors.angularjs.org ...
- springBoot配置druid监控报错Failed to bind properties under 'spring.datasource.druid' to javax.sql.DataSource
报错信息: Description: Failed to bind properties under 'spring.datasource.druid' to javax.sql.DataSource ...
- angular报错:angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq
报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...
随机推荐
- python requests库学习笔记(上)
尊重博客园原创精神,请勿转载! requests库官方使用手册地址:http://www.python-requests.org/en/master/:中文使用手册地址:http://cn.pytho ...
- [动态规划]P1378 油滴扩展
题目描述 在一个长方形框子里,最多有N(0≤N≤6)个相异的点,在其中任何一个点上放一个很小的油滴,那么这个油滴会一直扩展,直到接触到其他油滴或者框子的边界.必须等一个油滴扩展完毕才能放置下一个油滴. ...
- android 加载图片圆角等功能的处理
以Glide为例: Glide.with(getContext()).load(item.getSoftLogo()).transform(this.glideRoundTransform).into ...
- REMOTE_ADDR,HTTP_CLIENT_IP,HTTP_X_FORWARDED_FOR获取客户端IP
话不多说,先上代码: /** * 获得用户的真实IP地址 * * @access public * @return string */ function real_ip() { ...
- MFC中小笔记(三)
10.在添加新Menu之后,代码中 调用 创建的IDR_MENU1,一直出现 Debug Assertion Failed的情况.原因是,没有写入到 项目.RC中,需要更新下rc(资源文件). 然后进 ...
- 实时同步rsync+inotify
实时同步rsync+inotify 原创博文http://www.cnblogs.com/elvi/p/7658071.html #linux同步 #实时同步rsync+inotify,双向同步ino ...
- ConcurrentHashMap\HashMap put操作时key为什么要rehash
参考java并发编程的艺术一书中,对ConcurrentHashMap的讲解 ConcurrentHashMap使用的是分段锁Segment来保证不同的Segment区域互相不干扰,不存在锁竞争关系, ...
- c# textbox的滚动条总是指向最底端
当我第一次添加滚动条时候,我发现滚动条总是跑向上方,经过研究 解决方案如下: this.textBox1.Focus(); 获取焦点 this.textBox1.Select(this.textBox ...
- 初识CSS
css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...
- ArcGIS jsAPI (4.x)本地部署字体符号乱码
在下载了新版arcigs 的 JS API 后,每次部署在IIS中都会出现部件字体乱码的问题,需配置响应标头和添加文件映射 一. HTTP响应标头配置 在 IIS 中的 HTTP响应标头 中加入以下配 ...