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

時間 2019-12-12

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

原文原文鏈接

NgFormControl - 綁定已有控件對象

與NgControlName指令不一樣，NgFormControl將已有的控件/Control對象綁定到DOM元素上。當須要對輸入的值進行初始化時，能夠使用NgFormControl指令。javascript

下面的代碼中，使用NgFormControl指令將DOM元素綁定到組件EzComp的成員變量movie上，咱們須要在構造函數中先建立這個Control對象：html

 1 @View({
 2     //將輸入元素綁定到已經建立的控件對象上
 3     template : `<input type="text" [ng-form-control]="movie">`
 4 })
 5 class EzComp{
 6     constructor(){
 7         //建立控件對象
 8         this.movie = new Control("Matrix II - Reload");  9     }
10 }

控件/Control是Angular2中對錶單輸入元素的抽象，咱們使用其value屬性，就能夠得到對應的輸入元素的值。java

與NgControlName指令的另外一個區別是，NgFormControl不須要NgForm或NgFormModel的祖先。bootstrap

例如：angular2

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>NgFor</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} from "angular2/angular2";
14         import {Control,formDirectives} from "angular2/forms";
15         
16         @Component({selector:"ez-app"})
17         @View({
18             directives:[formDirectives],
19             template:`
20                 <div>
21                     <ul>
22                         <!--將輸入元素綁定到已經建立的控件對象-->
23                         <li>姓名：<input type="text" [ng-form-control]="name"></li>
24                         <li>地址：<input type="text" [ng-form-control]="address"></li>
25                         <li>電話：<input type="text" [ng-form-control]="telephone"></li>
26                     </ul>
27                 </div>
28                 <!--調試：轉儲模型信息-->
29                 <pre>{{dump()}}</pre>
30             `,
31             styles:[`
32                 form{background:#e1f5fe;}
33                 ul{list-style:none;padding:10px;margin:0px;}
34                 li{line-height:30px;}
35             `]
36         })
37         class EzApp{
38             constructor(){
39                 //建立控件對象
40                 this.name = new Control("Jason"); 41                 this.address = new Control("London U.K."); 42                 this.telephone = new Control("114"); 43             }
44             dump(){
45                 //讀取控件對象的值
46                 var val = {
47                     name : this.name.value,
48                     address : this.address.value,
49                     telephone : this.telephone.value
50                 }
51                 return JSON.stringify(val,null,"\t");
52             }
53         }      
54         bootstrap(EzApp);
55     </script>
56 </body>
57 </html>