NgForm - 表單指令
NgForm指令為表單元素/form建立一個控件組對象，作為控件的容器； 而NgControlName指令為則為宿主input元素建立一個控件對象，並將該控件加入到NgForm指令建立的控件組中：
局部變量
通過使用#符號，我們創建了一個引用控件組對象（注意，不是form元素！）的局部變量f。 這個變量最大的作用是：它的value屬性是一個簡單的JSON對象，鍵對應於input元素的 ng-control屬性，值對應於input元素的值：
聲明指令依賴
NgForm指令和NgControlName指令都包含在預定義的數組變量formDirectives中，所以我們在組件注解的directives屬性中直接聲明formDirectives就可以在模板中直接使用這些指令了：
1 //angular2/ts/src/forms/directives.ts 2 export const formDirectives = CONST_EXPR([ 3 NgControlName, 4 NgControlGroup, 5 6 NgFormControl, 7 NgModel, 8 NgFormModel, 9 NgForm, 10 11 NgSelectOption, 12 DefaultValueAccessor, 13 CheckboxControlValueAccessor, 14 SelectControlValueAccessor, 15 16 NgRequiredValidator 17 ]);
例如：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>NgForm</title> 6 <script type="text/javascript" src="lib/system@0.16.11.js"></script> 7 <script type="text/javascript" src="lib/angular2.dev.js"></script> 8 <script type="text/javascript" src="lib/system.config.js"></script> 9 </head> 10 <body> 11 <ez-app></ez-app> 12 <script type="module"> 13 import {Component,View,bootstrap,NgIf} from "angular2/angular2"; 14 //引入form指令集 15 import {formDirectives} from "angular2/forms"; 16 17 //EzApp組件 18 @Component({selector:"ez-app"}) 19 @View({ 20 directives:[formDirectives,NgIf], 21 template:` 22 <form #f="form" (submit)="search(f.value)"> 23 <select ng-control="lx"> 24 <option value="web">網頁</option> 25 <option value="news">新聞</option> 26 <option value="image">圖片</option> 27 </select> 28 <input type="text" ng-control="kw"> 29 <button type="submit">搜索</button> 30 </form> 31 <!--給個簡單的反饋--> 32 <h1 *ng-if="kw!=''">正在搜索 內容為{{kw}} 類型為{{lx}}...</h1> 33 `, 34 styles:[`form{background:#90a4ae;padding:5px;}`] 35 }) 36 class EzApp{ 37 constructor(){ 38 this.kw = ""; 39 this.lx = ""; 40 } 41 search(val){ 42 this.kw = val.kw; 43 this.lx = val.lx; 44 //假裝在搜索，2秒鍾返回 45 setTimeout(()=>this.kw="",30000); 46 } 47 } 48 bootstrap(EzApp); 49 </script> 50 </body> 51 </html>
結果為：
