一. 模板表单
1. 如下图
2. code
3. 效果图
二、响应式表单
1. 增加ReactiveFormsModule
2.响应式表单用到的类和指令
3. 控制器代码
4. html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!--响应式表单-->
<
form
[formGroup]="formModel" (submit)="submit()">
<
input
formControlName="username">
<
div
formGroupName="dateRange">
起始日期：<
input
type="date" formControlName="from">
截止日期：<
input
type="date" formControlName="to">
</
div
>
<
div
>
<
ul
formArrayName="emails">
<
li
*ngFor="let e of this.formModel.get('emails').controls; let i=index;">
<
input
type="text" [formControlName]="i">
</
li
>
</
ul
>
</
div
>
<
button
type="button" (click)="addEmail()">增加</
button
>
<
div
><
button
type="submit">保存</
button
></
div
>
</
form
>
|
6. 效果图
7. 使用FormBuild简化响应式表单代码
原来的写法
使用FormBuild简化
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/p/7344491.html，如需转载请自行联系原作者
