6.3 NgControlGroup 命名控件组 - RLwu/angular-start GitHub Wiki

NgControlGroup - 命名控件组

NgControlGroup指令的选择符是[ng-control-group]，如果模板中的某个元素具有这个属性， Angular2框架将自动创建一个控件组对象，并将这个对象以指定的名称与DOM对象绑定。

控件组可以嵌套，方便我们在语义上区分不同性质的输入：

ngcontrolgroup

和NgControlName指令一样，NgControlGroup指令也必须作为NgForm或NgFormModel的 后代使用，因为这个指令需要将创建的控件组对象添加到祖先（NgForm或NgFormModel）所创建 的控件组中。

例子

  • html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>NgControlGroup</title>
</head>
<body>
	<ez-app><img src="img/wait.gif"></ez-app>
    <script type="text/javascript" src="lib/angular2.beta.stack.min.js"></script>    
</body>
</html>
  • ts
import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";
import {CORE_DIRECTIVES,FORM_DIRECTIVES} from "angular2/common";

@Component({
	selector:"ez-app",
	directives:[CORE_DIRECTIVES,FORM_DIRECTIVES],
	template:`
		<form #f="ngForm">
			<div>基本信息</div>
			<!--声明控件组-->
			<ul ngControlGroup="basic">
				<li>姓名：<input type="text" ngControl="name"></li>
				<li>地址：<input type="text" ngControl="address"></li>
				<li>电话：<input type="text" ngControl="telephone"></li>
			</ul>
			<div>专业技能</div>
			<!--声明控件组-->
			<ul ngControlGroup="expertise">
				<li>英语：<input type="checkbox" ngControl="english"></li>
				<li>科技：<input type="checkbox" ngControl="tech"></li>
				<li>运动：<input type="checkbox" ngControl="sport"></li>
			</ul>
		</form>
		<!--调试：实时转储模型的值-->
		<pre>{{decode(f.value)}}</pre>
	`,
	styles:[`
		div{padding:5px;background:#b3e5fc;color:red;}
		form{background:#e1f5fe;}
		ul{list-style:none;padding:5px;margin:0px;}
		li{line-height:30px;}
	`]
})
class EzApp{
	decode(val){
		return JSON.stringify(val,null,"\t");
	}
}

bootstrap(EzApp);
⚠️ **GitHub.com Fallback** ⚠️