Angular2組件開發—表單輸入（一）

時間 2019-12-14

標籤 angular2 angular 組件開發表單輸入欄目 AngularJS 简体版

原文原文鏈接

NgForm - 表單指令

NgForm指令爲表單元素/form創建一個控件組對象，做爲控件的容器；而NgControlName指令爲則爲宿主input元素創建一個控件對象，並將該控件加入到NgForm指令創建的控件組中：javascript

局部變量html

經過使用#符號，咱們建立了一個引用控件組對象（注意，不是form元素！）的局部變量f。這個變量最大的做用是：它的value屬性是一個簡單的JSON對象，鍵對應於input元素的 ng-control屬性，值對應於input元素的值：java

聲明指令依賴web

NgForm指令和NgControlName指令都包含在預約義的數組變量formDirectives中，因此咱們在組件註解的directives屬性中直接聲明formDirectives就能夠在模板中直接使用這些指令了：bootstrap

 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>