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

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { LoginModule } from './login/login.module';
import { AppRoutingModule } from './app.route.module'; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CoreModule,
FormsModule,
ReactiveFormsModule,
LoginModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

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

[formGroup]="myGroup"
 <div class="login-wrap">
<form [formGroup]="myGroup" (ngSubmit)="onSubmit(myGroup,$event)">
<mat-card class="example-card">
<mat-card-header><mat-card-title>登录</mat-card-title></mat-card-header>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="您的email" formControlName="email">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="您的密码" formControlName="password">
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button type="submit">登录</button>
</mat-card-actions>
<mat-card-footer>
<p>还没有账户?<a href="#">注册</a></p>
<p>忘记密码?<a href="#">找回</a></p>
</mat-card-footer>
</mat-card>
</form>
<mat-card class="example-card">
<mat-card-header>
<mat-card-title>每日佳句</mat-card-title>
<mat-card-subtitle>满足感是在于不断努力,而不是现有成就。全新努力就会胜利满满。</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
</mat-card>
</div>

最新文章

  1. Linux/Mac/Shell常用命令
  2. IOS8下,百度地图无法定位解决办法
  3. Google Glass应用开发探索
  4. 内核源码分析之tasklet(基于3.16-rc4)
  5. 虚拟攻防系统 HoneyPot
  6. bzoj 1209: [HNOI2004]最佳包裹 三维凸包
  7. ROM包内的大致框架及各个文件的作用[转]
  8. poj 1273 Drainage Ditches_最大流模版
  9. G - I Think I Need a Houseboat(简单题,粘贴下来是因为数据精度需要注意)
  10. Ubuntu + VMware=Linux虚拟机
  11. LRU算法总结
  12. jQuery:deferred [转]
  13. Docker(六):Docker网络配置进阶
  14. wpf 无缝滚动
  15. Spark环境搭建(三)-----------yarn环境搭建及测试作业提交
  16. Lesson 01-Linux安装及基础命令
  17. [20180801]insert导致死锁.txt
  18. keal
  19. CodeForces 550A Two Substrings(模拟)
  20. posix多线程--条件变量

热门文章

  1. 想学android进来看看吧~ ~
  2. 三个角度解构云计算,商业驱动or技术驱动?
  3. 搭建 GIT 服务器教程
  4. 23. Node.Js Buffer类(缓冲区)-(三)文件读取实例
  5. 洛谷P3374 【模板】树状数组 1(CDQ分治)
  6. BZOJ3620: 似乎在梦中见过的样子(KMP)
  7. MFC 任务托盘经常消失问题
  8. Lightoj 1043 - Triangle Partitioning【二分】
  9. ToggleButton控件
  10. 【MySQL集群】——Java程序连接MySQL集群