首页 > 其他 > 详细

Angular 表单

时间:2017-08-11 12:57:53      阅读:354      评论:0      收藏:0      [点我收藏+]

一. 模板表单

1. 如下图

技术分享

 

2. code

技术分享

 3. 效果图

技术分享

 

二、响应式表单

1. 增加ReactiveFormsModule

技术分享

2.响应式表单用到的类和指令

技术分享

 

3. 控制器代码

技术分享

 

4. html

<!--响应式表单-->
<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简化

技术分享

 

Angular 表单

原文:http://www.cnblogs.com/linlf03/p/7344491.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!