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>

结果为：