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

在APP.module.ts中引入FormsModule, ReactiveFormsModule。

 1 import { BrowserModule } from ‘@angular/platform-browser‘;
 2 import { NgModule } from ‘@angular/core‘;
 3 import { FormsModule, ReactiveFormsModule } from ‘@angular/forms‘;
 4
 5 import { AppComponent } from ‘./app.component‘;
 6 import { CoreModule } from ‘./core/core.module‘;
 7 import { LoginModule } from ‘./login/login.module‘;
 8 import { AppRoutingModule } from ‘./app.route.module‘;
 9
10 @NgModule({
11   declarations: [
12     AppComponent
13   ],
14   imports: [
15     BrowserModule,
16     CoreModule,
17     FormsModule,
18     ReactiveFormsModule,
19     LoginModule,
20     AppRoutingModule
21   ],
22   providers: [],
23   bootstrap: [AppComponent]
24 })
25 export class AppModule { }

特别注意:在HTML中一定不能用form,随便换一个单词myGroup就行。

[formGroup]="myGroup"
 1 <div class="login-wrap">
 2   <form [formGroup]="myGroup" (ngSubmit)="onSubmit(myGroup,$event)">
 3     <mat-card class="example-card">
 4       <mat-card-header><mat-card-title>登录</mat-card-title></mat-card-header>
 5       <mat-card-content>
 6         <mat-form-field>
 7           <input matInput placeholder="您的email" formControlName="email">
 8         </mat-form-field>
 9         <mat-form-field>
10           <input matInput placeholder="您的密码" formControlName="password">
11         </mat-form-field>
12       </mat-card-content>
13       <mat-card-actions>
14         <button mat-raised-button type="submit">登录</button>
15       </mat-card-actions>
16       <mat-card-footer>
17         <p>还没有账户?<a href="#">注册</a></p>
18         <p>忘记密码?<a href="#">找回</a></p>
19       </mat-card-footer>
20     </mat-card>
21   </form>
22   <mat-card class="example-card">
23     <mat-card-header>
24       <mat-card-title>每日佳句</mat-card-title>
25       <mat-card-subtitle>满足感是在于不断努力,而不是现有成就。全新努力就会胜利满满。</mat-card-subtitle>
26     </mat-card-header>
27     <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
28     <mat-card-content>
29       <p>
30         The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
31         A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
32         bred for hunting.
33       </p>
34     </mat-card-content>
35   </mat-card>
36 </div>

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

原文地址:https://www.cnblogs.com/hibiscus-ben/p/10184289.html

时间: 2024-10-11 09:41:21

Can't bind to 'formGroup' since it isn't a known property of 'form'的相关文章

Angular 报错 Can&#39;t bind to &#39;formGroup&#39; since it isn&#39;t a known property of &#39;form&#39;

错误描述 当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 [nz

Angular4 - Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;.

用[(ngModel)]="xxx"双向绑定,如:控制台报错:Can't bind to 'ngModel' since it isn't a known property of 'input'.   解决办法:在app.module.ts文件中导入FormsModule Angular4 - Can't bind to 'ngModel' since it isn't a known property of 'input'.

在懒加载的Ionic工程中使用 ionic2-auto-complete 组件:Can&#39;t bind to &#39;dataProvider&#39; since it isn&#39;t a known property of &#39;ion-auto-complete&#39;

问题描述: 在基于懒加载的Ionic工程中,使用ionic2-auto-complete组件(GitHub地址:https://github.com/kadoshms/ionic2-autocomplete),出现以下错误提示: 说明:组件使用均是按照GitHub上的标准写法, 在非懒加载的Ionic工程中可以正常使用(可以参看我另外一篇博客:http://www.cnblogs.com/crazyprogrammer/p/6925199.html), 但是工程在改造成懒加载模式后,会出现上述错

Angular: Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;问题解决

https://blog.csdn.net/h363659487/article/details/78619225 最初使用 [(ngModel)] 做双向绑定时,如果遇见Angular: Can't bind to 'ngModel' since it isn't a known property of 'input'问题 解决办法: 在你的app.module中添加如下代码即可: import { FormsModule, ReactiveFormsModule } from '@angul

Can&#39;t bind to &#39;ngModel&#39; since it isn&#39;t a known property of &#39;input&#39;.

angular项目启动报错 Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:当前module模块未引入 'ngModel',  把 FormsModule 添加到 @NgModule 元数据的 imports 数组中即可 Can't bind to 'ngModel' since it isn't a known property of 'input'. 原文地址:https://www.cnblogs

事件绑定之.bind()

.bind(eventType[,eventData],handler(eventObject)) 描述:为一个元素绑定一个事件处理程序,bind()绑定方法的时候元素必须已经存在. -eventType string类型 一个包含一个或多个DOM事件类型的字符串,或自定义事件.多个由空格分开. -eventData Object类型 一个对象,它包含的数据键值对映射将被传递给事件处理程序.不常用 -handler(eventObject) Function()类型 每当事件触发时执行的函数.

Forms and actions

Forms and actions Adding new albums We can now code up the functionality to add new albums. There are two bits to this part: Display a form for user to provide details. Process the form submission and store to database. We will use zend-form to do th

注解配置的Spring MVC

基于注解配置的Spring MVC 简单的HelloWorld实例应用 2.1 问题 使用注解的方式重构helloworld应用案例. 2.2 方案 1. @RequestMapping注解应用 @RequestMapping可以用在类定义和方法定义上,它标明这个类或方法与哪一个客户请求对应.实例代码如下: @RequestMapping("/day01") public class HelloController { @RequestMapping("/hello.form

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名"form-control",将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果