6.2 NgControlName 命名控件指令 - RLwu/angular-start GitHub Wiki

NgControlName - 命名控件指令

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

NgControlName指令的选择符是[ngControl]，这意味着你必须在一个HTML元素上 定义ngControl属性，这个指令才会起作用。

属性：ngControl

NgControlName指令为宿主的DOM对象创建一个控件对象，并将这个对象以ngControl属性 指定的名称绑定到DOM对象上：

<form #f="ngForm">
    <input type="text" ngControl="user">
    <input type="password" ngControl="pass">
</form>

在上面的代码中，将创建两个Control对象，名称分别为user和pass。

属性/方法：ngModel

除了使用控件组获得输入值，NgControlName指令可以通过ngModel实现模型 与表单的双向绑定：

<form>
    <input type="text" ngControl="user" [(ngModel)]="data.user">
    <input type="password" ngControl="pass" [(ngModel)]="data.pass">
</form>`

ngModel即是NgControlName指令的属性，也是它的事件，所以下面 的两种写法是等价的：

<input type="text" ngControl="user" [(ngModel)]="data.user">
//等价于
<input type="text" ngControl="user" [ngModel]="data.user" (ngModel)="data.user">

例子

  • html
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>NgControlName</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>
			<ul>
				<li>姓名：<input type="text" ngControl="name" [(ngModel)]="data.name"></li>
				<li>姓别：
					<select ngControl="gender" [(ngModel)]="data.gender">
						<option value="Male">男</option>
						<option value="Female">女</option>
					</select>
				</li>
				<li>地址：<input type="text" ngControl="address" [(ngModel)]="data.address"></li>
				<li>电话：<input type="text" ngControl="telephone" [(ngModel)]="data.telephone"></li>
				<li>已婚：<input type="checkbox" ngControl="marriage" [(ngModel)]="data.marriage"></li>
			</ul>
		</form>
		<pre>{{decode(data)}}</pre>
	`,
	styles:[`
		form{background:#e1f5fe;}
		ul{list-style:none;padding:10px;margin:0px;}
		li{line-height:30px;}
	`]
})
class EzApp{
	constructor(){
		this.data = {
			name : "whoami"
		};
	}
	decode(val){
		return JSON.stringify(val,null,"\t");
	}
}

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