Angular 表单

时间：2017-08-11 13:33:11 阅读：104 评论：0 收藏：0 [点我收藏+]

标签：cli sub img nbsp add user module submit div

一. 模板表单

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. 效果图

技术分享