Angular 4 表单
一. 模板表单
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,如需转载请自行联系原作者