[Day06]Angular 2教程:06 Angular 2 表单

说明:本系列是30天精通Angular2系列，此教程会第一时间发布在最三方平台，希望给你带来帮助！

本文出自最三方Angular系列教程，转载请注明出处！

Angular2框架仰赖著 HTML 5 强大的功能，本身已经包括双向绑定、变化跟踪、验证、错误处理等功能。

可以处理：

1.  Component 和 Template 构建表单
2.  双向绑定[(ngModel)]读写表单表。
3.  ngControl追踪表单状态和有效性。
4.  根据ngControl改变 CSS。
5.  显示验证错误消息并启用/禁止表单。
6.  使用本地模板变量共享控制间的信息。

 简单版
 

01 // app.simpleform.html 02 <!-- 这边有用 Bootstrap CSS 唷！ --> 03 <div class="jumbotron"> 04    <h2>Template Driven Form</h2> 05     <!-- 这边我们宣告一个区域变量 "form" 并让它变成 ngForm 的实例。这样子可以让 "form" 使用 FormGroup的 API，我们就能够用 ngSubmit 送出 form.value 表格的值。--> 06    <form #form="ngForm" (ngSubmit)="submitForm(form.value)"> 07      <div class="form-group"> 08        <label>First Name:</label> 09        <!-- 这边的 ngModal 是单向绑定，只会送资料回去。当然我们也可以用 [(ngModal)] 来双向绑定表格的值 --> 10        <input type="text" class="form-control" placeholder="John" name="firstName" ngModel required> 11      </div> 12      <div class="form-group"> 13        <label>Last Name</label> 14        <input type="text" class="form-control" placeholder="Doe" name="lastName" ngModel required> 15      </div> 16      <div class="form-group"> 17        <label>Gender</label> 18      </div> 19      <!-- Radio 和 checkbox 跟一般的 HTML用法差不多 --> 20      <div class="radio"> 21        <label> 22          <input type="radio" name="gender" value="Male" ngModel> 23          Male 24        </label> 25      </div> 26      <div class="radio"> 27        <label> 28          <input type="radio" name="gender" value="Female" ngModel> 29          Female 30        </label> 31      </div> 32      <div class="form-group"> 33        <label>Activities</label> 34      </div> 35      <label class="checkbox-inline"> 36        <input type="checkbox" value="hiking" name="hiking" ngModel> 37        Hiking 38      </label> 39      <label class="checkbox-inline"> 40        <input type="checkbox" value="swimming" name="swimming" ngModel> 41        Swimming 42      </label> 43      <label class="checkbox-inline"> 44        <input type="checkbox" value="running" name="running" ngModel> 45        Running 46      </label> 47      <div class="form-group"> 48        <button type="submit" class="btn btn-default">Submit</button> 49      </div> 50    </form> 51  </div>

 

01 // app.simpleform.ts 02 import { Component } from '@angular/core'; 03   04 @Component({ 05   selector: 'simple-form', 06   templateUrl: 'app.simpleform.html' 07 }) 08 export class <u><a href="/archives/view-700-1.html" target="_blank">Simp</a></u>leFormComponent { 09   //这边设定提交后要干嘛，目前只是 Console.log 出资料而已 10   submitForm(form: any): void{ 11     console.log('Form Data: '); 12     console.log(form); 13   } 14 }

 程序代码就不多解释，都有加注解，此外 required 会强制要求使用者输入，否则就会无法提交。
 上面的范例会长得像这样
 
 
 复杂一点点版本
 好的例子胜过万言
 

01 // app.complexform.ts 02   03 import { Component } from '@angular/core'; 04 // 需要引入一些程序库 05 import { FormBuilder, FormGroup } from '@angular/forms'; 06   07 @Component({ 08   selector: 'complex-form', 09   templateUrl : './app.complexform.html' 10 }) 11 export class ComplexFormComponent { 12   // 新建一个 FormGroup 物件 13   complexForm : FormGroup; 14   15   // 建构一个实例 FormBuilder 16   constructor(fb: FormBuilder){ 17     // 用 FormBuilder 来制造我们的表格 18     this.complexForm = fb.group({ 19       // 定义表格的缺省值 20       'firstName' : '', 21       'lastName': '', 22       'gender' : 'Female', 23       'hiking' : false, 24       'running' : false, 25       'swimming' : false 26     }) 27   } 28   29   // 提交的执行的 function 30   submitForm(value: any): void { 31     console.log('Reactive Form Data:', value); 32   } 33 }

01 //app.complexform.html 02 <div class="jumbotron"> 03     <h2>Data Driven (Reactive) Form</h2> 04     <!-- 现在我们不宣告区域变量了，改用formGroup 这个指令，并将它定义成 complexForm 物件。 complexForm 将会控制表格所有的变量 --> 05     <form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 06       <div class="form-group"> 07         <label>First Name:</label> 08         <!-- 不用 ngModel 而改用 formControl 指令可以同步 input 到 complexForm 物件。现在也不需要 name 属性了，但还是可以选择加入 --> 09         <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']"> 10       </div> 11       <div class="form-group"> 12         <label>Last Name</label> 13         <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']"> 14       </div> 15       <div class="form-group"> 16         <label>Gender</label> 17       </div> 18       <div class="radio"> 19         <label> 20           <input type="radio" name="gender" value="Male" [formControl]="complexForm.controls['gender']"> 21           Male 22         </label> 23       </div> 24       <div class="radio"> 25         <label> 26           <!-- radio 和 checkbox 用法也一样 --> 27           <input type="radio" name="gender" value="Female" [formControl]="complexForm.controls['gender']"> 28           Female 29         </label> 30       </div> 31       <div class="form-group"> 32         <label>Activities</label> 33       </div> 34       <label class="checkbox-inline"> 35         <input type="checkbox" value="hiking" name="hiking" [formControl]="complexForm.controls['hiking']"> Hiking 36       </label> 37       <label class="checkbox-inline"> 38         <input type="checkbox" value="swimming" name="swimming" [formControl]="complexForm.controls['swimming']"> Swimming 39       </label> 40       <label class="checkbox-inline"> 41         <input type="checkbox" value="running" name="running" [formControl]="complexForm.controls['running']"> Running 42       </label> 43       <div class="form-group"> 44         <button type="submit" class="btn btn-default">Submit</button> 45       </div> 46     </form> 47   </div>

 上面复杂一点点的范例，更贴切 Angular 的用法，跑出来会长这样。
 
 也可以看到 Female 为缺省值。

 表格验证
 Angular 2 的表格验证支持模板控制以及组件控制，但是透过组件控制在表格验证上有更大的弹性。详细可以参考 Angular 2 docs。
 
 我们从复杂板来加入表格验证功能
 

01 //app.validationform.ts 02   03 import { Component } from '@angular/core'; 04 // 引入 Validators 05 import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 06   07 @Component({ 08   selector: 'form-validation', 09   template : 'app.validationform.html' 10 }) 11 export class FormValidationComponent { 12   complexForm : FormGroup; 13   14   constructor(fb: FormBuilder){ 15     this.complexForm = fb.group({ 16       // 表示一定要输入 17       'firstName' : [null, Validators.required], 18       // 表示一定要输入，而且最短为5个字符，最多为10个字符。有多个守则时用阵列包住。 19       'lastName': [null,  Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])], 20       'gender' : [null, Validators.required], 21       'hiking' : [false], 22       'running' : [false], 23       'swimming' : [false] 24     }) 25       26     // 用来观察表格元素的变化 27     console.log(this.complexForm); 28     this.complexForm.valueChanges.subscribe( (form: any) => { 29       console.log('form changed to:', form); 30     } 31     ); 32   } 33   34   // 提交执行的程序 35   submitForm(value: any){ 36     console.log(value); 37   } 38 }

 

本文由 最三方开源平台( http://www.zuisanfang.com/archives/view-2088-1.html)原创，转载请保留版权和链接!