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& ...
随机推荐
- 【框架学习与探究之依赖注入--Autofac】
声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7603642.html 序 同样的又是一个双11如期而至,淘宝/天猫实时数据显示,开场3分钟总交易额突破 ...
- python基础教程——dict和set
dict python内置字典:dict,全称dictionary,在其他语言中称为map,使用键值对存储. ex: d = {'xiaoli' : 95 , 'xiaoming' : 98 , 'x ...
- RecyclerView 加点击事件
在apapter里去实现. View.OnClickListener onClickListener = new View.OnClickListener() { @Override public v ...
- c# winform 窗体之间的传参
说起winform程序中窗体之间的参数互传,大家找度娘会找到很多方法: 1.在窗体类中创建全局变量,类型为公开.静态的: 2.在窗体类中定义狗仔函数: 3.通过实践来船体参数: 这三种思路完全来自于霖 ...
- 内网神器-Bettercap
安装bettercap 1 2 root@sch01ar:~# apt-get update root@sch01ar:~# apt-get install bettercap 安装完成后查看一下帮 ...
- (12.05)Java小知识!
今天与大家分享关于抽象类的知识点. 抽象类: 抽象类应用场景:在某种情况下,某个父类只是知道子类应该包含怎样的方法,但无法准确的知道这些子类如何实现这些方法. 从多一个具有相同特征的类中抽象出一个抽 ...
- js实现关键词高亮显示 正则匹配
html 和ajax 部分就不写了,只需将需要匹配的文字传进去就可以了 比如匹配后台传回的字符串data.content中的关键词:直接调用: data.content = highLightKeyw ...
- NYOJ 138 找球号(二) bitset 二进制的妙用
找球号(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i< ...
- Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构
用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...
- java多线程编程核心技术——第二章
第一节synchronized同步方法目录 1.1方法内的变量为线程安全的 1.2实例变量非线程安全 1.3多个对象多个锁 1.4synchronized方法与锁对象 1.5脏读 1.6synchro ...