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

時間 2019-12-14

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

原文原文鏈接

NgControlGroup - 命名控件組

NgControlGroup指令的選擇符是[ng-control-group]，若是模板中的某個元素具備這個屬性， Angular2框架將自動建立一個控件組對象，並將這個對象以指定的名稱與DOM對象綁定。javascript

控件組能夠嵌套，方便咱們在語義上區分不一樣性質的輸入：html

和NgControlName指令同樣，NgControlGroup指令也必須做爲NgForm或NgFormModel的後代使用，由於這個指令須要將建立的控件組對象添加到祖先（NgForm或NgFormModel）所建立的控件組中。java

例如：bootstrap

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>NgControlGroup</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 #f="form">
21                     <div>基本信息</div>
22                     <!--聲明控件組-->
23                     <ul ng-control-group="basic">
24                         <li>姓名：<input type="text" ng-control="name"></li>
25                         <li>地址：<input type="text" ng-control="address"></li>
26                         <li>電話：<input type="text" ng-control="telephone"></li>
27                     </ul>
28                     <div>專業技能</div>
29                     <!--聲明控件組-->
30                     <ul ng-control-group="expertise">
31                         <li>英語：<input type="checkbox" ng-control="english"></li>
32                         <li>科技：<input type="checkbox" ng-control="tech"></li>
33                         <li>運動：<input type="checkbox" ng-control="sport"></li>
34                     </ul>
35                     <div>愛好</div>
36                      <!--聲明控件組-->
37                      <ul ng-control-group="like">
38                         <li>英語：<input type="checkbox" ng-control="english"></li>
39                         <li>科技：<input type="checkbox" ng-control="tech"></li>
40                         <li>運動：<input type="checkbox" ng-control="sport"></li>
41                     </ul>
42                 </form>
43                 <!--調試：實時轉儲模型的值-->
44                 <pre>{{decode(f.value)}}</pre>
45             `,
46             styles:[`
47                 div{padding:5px;background:#b3e5fc;color:red;}
48                 form{background:#e1f5fe;}
49                 ul{list-style:none;padding:5px;margin:0px;}
50                 li{line-height:30px;}
51             `]
52         })
53         class EzApp{
54             decode(val){
55                 return JSON.stringify(val,"\t"); 56             }
57         }       
58         bootstrap(EzApp);
59     </script>
60 </body>
61 </html>