Angular2组件开发—表单输入（一）
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>
结果为：
