错误描述

当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. 【框架学习与探究之依赖注入--Autofac】

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7603642.html 序 同样的又是一个双11如期而至,淘宝/天猫实时数据显示,开场3分钟总交易额突破 ...

  2. python基础教程——dict和set

    dict python内置字典:dict,全称dictionary,在其他语言中称为map,使用键值对存储. ex: d = {'xiaoli' : 95 , 'xiaoming' : 98 , 'x ...

  3. RecyclerView 加点击事件

    在apapter里去实现. View.OnClickListener onClickListener = new View.OnClickListener() { @Override public v ...

  4. c# winform 窗体之间的传参

    说起winform程序中窗体之间的参数互传,大家找度娘会找到很多方法: 1.在窗体类中创建全局变量,类型为公开.静态的: 2.在窗体类中定义狗仔函数: 3.通过实践来船体参数: 这三种思路完全来自于霖 ...

  5. 内网神器-Bettercap

    安装bettercap 1 2 root@sch01ar:~# apt-get update root@sch01ar:~#  apt-get install bettercap 安装完成后查看一下帮 ...

  6. (12.05)Java小知识!

     今天与大家分享关于抽象类的知识点. 抽象类: 抽象类应用场景:在某种情况下,某个父类只是知道子类应该包含怎样的方法,但无法准确的知道这些子类如何实现这些方法. 从多一个具有相同特征的类中抽象出一个抽 ...

  7. js实现关键词高亮显示 正则匹配

    html 和ajax 部分就不写了,只需将需要匹配的文字传进去就可以了 比如匹配后台传回的字符串data.content中的关键词:直接调用: data.content = highLightKeyw ...

  8. NYOJ 138 找球号(二) bitset 二进制的妙用

    找球号(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:5 描述 描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i< ...

  9. Python搭建Web服务器,与Ajax交互,接收处理Get和Post请求的简易结构

    用python搭建web服务器,与ajax交互,接收处理Get和Post请求:简单实用,没有用框架,适用于简单需求,更多功能可进行扩展. python有自带模块BaseHTTPServer.CGIHT ...

  10. java多线程编程核心技术——第二章

    第一节synchronized同步方法目录 1.1方法内的变量为线程安全的 1.2实例变量非线程安全 1.3多个对象多个锁 1.4synchronized方法与锁对象 1.5脏读 1.6synchro ...