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

時間 2019-12-09

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

原文原文鏈接

NgControlName - 命名控件指令

如前所述，NgControlName指令必須做爲NgForm或NgFormModel的後代使用，由於這個指令須要將建立的控件對象添加到祖先（NgForm或NgFormModel）所建立的控件組中。javascript

NgControlName指令的選擇符是[ng-control]，這意味着你必須在一個HTML元素上定義ng-control屬性，這個指令纔會起做用。html

屬性：ngControljava

NgControlName指令爲宿主的DOM對象建立一個控件對象，並將這個對象以ngControl屬性指定的名稱綁定到DOM對象上：bootstrap

1 <form #f="form">
2     <input type="text" ng-control="user">
3     <input type="password" ng-control="pass">
4 </form>

在上面的代碼中，將建立兩個Control對象，名稱分別爲user和pass。angular2

屬性/方法：ngModelapp

除了使用控件組得到輸入值，NgControlName指令能夠經過ngModel實現模型與表單的雙向綁定：this

1 <form>
2     <input type="text" ng-control="user" [(ng-model)]="data.user">
3     <input type="password" ng-control="pass" [(ng-model)]="data.pass">
4 </form>`

ngModel便是NgControlName指令的屬性，也是它的事件，因此下面的兩種寫法是等價的：spa

1 <input type="text" ng-control="user" [(ng-model)]="data.user">
2 //等價於
3 <input type="text" ng-control="user" [ng-model]="data.user" (ng-model)="data.user">

例如：雙向綁定

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>NgControlName</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         import {formDirectives} from "angular2/forms";
15         
16         @Component({selector:"ez-app"})
17         @View({
18             directives:[NgIf,formDirectives],
19             template:`
20                 <form>
21                     <ul>
22                         <li>姓名：<input type="text" ng-control="name" [(ng-model)]="data.name"></li>
23                         <li>姓別：
24                             <select ng-control="gender" [(ng-model)]="data.gender">
25                                 <option value="Male">男</optoin>
26                                 <option value="Female">女</optoin>
27                             </select>
28                         </li>
29                         <li>地址：<input type="text" ng-control="address" [(ng-model)]="data.address"></li>
30                         <li>電話：<input type="text" ng-control="telephone" [(ng-model)]="data.telephone"></li>
31                         <li>已婚：<input type="checkbox" ng-control="marriage" [(ng-model)]="data.marriage"></li>
32                     </ul>
33                 </form>
34                 <pre>{{decode(data)}}</pre>
35             `,
36             styles:[`
37                 form{background:#e1f5fe;}
38                 ul{list-style:none;padding:10px;margin:0px;}
39                 li{line-height:30px;}
40             `]
41         })
42         class EzApp{
43             constructor(){
44                 this.data = {
45                     name : "whoami"
46                 };
47             }
48             decode(val){
49                return JSON.stringify(val,null,"\t"); 50             }
51         }        
52         bootstrap(EzApp);
53     </script>
54 </body>
55 </html>