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& ...
随机推荐
- struts2对于处理JSON的配置
由于最近几年日益流行前后端分离模式,JSON作为数据载体也变得不可或缺.几乎所有的web框架都需要支持JSON,下面咱就一起了解下struts2是如何支持JSON的. 对于JSON的发送 这里有两种方 ...
- Hangfire在ASP.NET CORE中的简单实现
hangfire是执行后台任务的利器,具体请看官网介绍:https://www.hangfire.io/ 新建一个asp.net core mvc 项目 引入nuget包 Hangfire.AspNe ...
- POJ3083 Children of the Candy Corn(Bfs + Dfs)
题意:给一个w*h的迷宫,其中矩阵里面 S是起点,E是终点,“#”不可走,“.”可走,而且,S.E都只会在边界并且,不会在角落,例如(0,0),输出的话,每组数据就输出三个整数,第一个整数,指的是,以 ...
- MYSQL 主从复制---简单易学
本帖最后由 传说中的草包 于 2017-4-12 09:12 编辑为什么要用mysql主从复制? 这个问题不需要回答吧,,,,,想想,一个人干活快呢,还是一万个能性格功力一样的人干活快呢. 不用解释大 ...
- 3、C#基础 - C# 的 Hello World
HelloWorld,是学会程序的通用起手式了,哈哈. 打开我们的VS:文件\新建\项目 选择"控制台应用(.NET Framework)",名称改为"HelloWorl ...
- springCloud Hystrix 断路由
第一步加入依赖: <dependency> <groupId>org.springframework.cloud</groupId> <artifactId& ...
- 简陋的斗地主,js实现
最近闲了两天没事做,用js写了个斗地主,练习练习.代码和功能都很简陋,还有bug,咋只是聊聊自己的思路. 这里说说斗地主主要包含的功能:洗牌,发牌,玩家出牌.电脑出牌,出牌规则的验证,输赢啥的没有判断 ...
- apply/call/bind的区别与用法
apply 方法/call 方法 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是 ...
- Java---Ajax在Struts2框架的应用实例
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 很久没有动过ajax了,趁此机会复习一下,写一个简单的例子 一.项目结构: 二.需要的jar包 三.具体代码: 1.web.x ...
- 【Jquery】prop与attr的差别
近期因项目须要用到复选框,当中一个控制全选. // 全选 $(".ckb_all").click(function(){ if($(this).attr("checked ...