错误描述

当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'的更多相关文章

  1. Can't bind to 'formGroup' since it isn't a known property of 'form'

    在APP.module.ts中引入FormsModule, ReactiveFormsModule. import { BrowserModule } from '@angular/platform- ...

  2. 运行tomcat,报错:Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误

    运行tomcat时,报错: Socket bind failed: [730048] ?????????×???(Э?é/???????/???)????í??错误 原因分析: 这是因为之前已开启了一 ...

  3. idea 报错javax/xml/bind/DatatypeConverter

    idea 报错javax/xml/bind/DatatypeConverter   java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeCon ...

  4. (前端)angular报错日常以及记录日常

    目录1 json的key...value问题 遍历json的key...value的时候报错: [tslint] for (... in ...) statements must be filtere ...

  5. Angular报错

    报错: Module 'App' is not available! You either misspelled the module name or forgot to load it. If re ...

  6. fiddler启动报错Unable to bind to port [8888],ErrorCode:10106

    启动运行fiddler 报错,提示Unable to bind to port [8888],ErrorCode:10106 解决方式: 使用Fiddler或其他类似的监听工具出现这种错误时, Una ...

  7. angular 报错笔记

    1.错误信息: Failed to instantiate module app due to: Error: [$injector:unpr] http://errors.angularjs.org ...

  8. 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 ...

  9. 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& ...

随机推荐

  1. Web登录敲门砖之sql注入

    声明:文本原创,转载请说明出处,若因本文而产生任何违法违纪行为将与本人无关.在百度.博客园.oschina.github .SegmentFault.上面都关于sql注入的文章和工具.看过很多sql注 ...

  2. 利用docker搭建spark hadoop workbench

    目的 用docker实现所有服务 在spark-notebook中编写Scala代码,实时提交到spark集群中运行 在HDFS中存储数据文件,spark-notebook中直接读取 组件 Spark ...

  3. Spring框架——AOP代理

    我们知道AOP代理指的就是设计模式中的代理模式.一种是静态代理,高效,但是代码量偏大:另一种就是动态代理,动态代理又分为SDK下的动态代理,还有CGLIB的动态代理.Spring AOP说是实现了AO ...

  4. JavaScript(五):函数(闭包,eval)

    1.函数的申明:三种方法: function命令 函数表达式:变量赋值 Function构造函数 //method 1: function命令 function test(){ console.log ...

  5. Android Lint的使用

    一.概述 Android Lint是在ADT 16(和 Tools 16)引入的一个新工具,可以扫描Android 项目源码中潜在的bug .例如: 缺少翻译(和未使用的翻译)布局性能问题(老的lay ...

  6. javascript 复制数组

    常用复制数组的几种方法 直接arr1 = arr2 这种方法复制的是原数组的引用,修改复制出来的新数组会改变原来数组的内容 var arr = [1, 2, 3, 6]; var arr_ = arr ...

  7. 外观模式(Facade)

    外观模式(Facade) 外观模式是为了解决类与类之家的依赖关系的,像spring一样,可以将类和类之间的关系配置到配置文件中,而外观模式就是将他们的关系放在一个Facade类中,降低了类类之间的耦合 ...

  8. HDU 2686 Matrix 多线程dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2686 思路:多线程dp,参考51Nod 1084:http://www.51nod.com/onlin ...

  9. php计算多个集合的笛卡尔积实例详解

    笛卡尔积 笛卡尔积是指在数学中,两个集合X和Y的笛卡尔积(Cartesian product),又称直积,表示为X*Y,第一个对象是X的成员而第二个对象是Y的所有可能有序对的其中一个成员. 假设集合A ...

  10. form表单数据封装成json格式并提交给服务器

    1.jsp代码,form表单: <form action="#" id="costForm"> <input type="hidde ...