您的位置：首页 > Web前端 > AngularJS

Angular2组件开发—表单输入（五）

2015-12-16 17:40 627 查看

NgFormModel - 绑定已有控件组

NgFormModel指令类似于NgControlGroup指令，都是为控件提供容器。但区别在于，NgFormModel指令将已有的控件组绑定到DOM对象上：

@View({
template : `
<!--绑定控件组与控件对象-->
<div [ng-form-model]="controls">
<input type="text" ng-control="name">
<input type="text" ng-control="age">
</div>`
})
class EzComp{
constructor(){
//创建控件组及控件对象
 this.controls = new ControlGroup({
             name :new Control("Jason"),
             age : new Control("45")
         });
     }
}

NgFormModel指令可以包含NgControlGroup指令，以便将不同性质的输入分组。

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NgFor</title>
<script type="text/javascript" src="lib/system@0.16.11.js"></script>
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
<ez-app></ez-app>
<script type="module">
import {Inject,Component,View,bootstrap} from "angular2/angular2";
import {Control,ControlGroup,formDirectives} from "angular2/forms";

@Component({selector:"ez-app"})
@View({
directives:[formDirectives],
template:`
<div [ng-form-model]="controls">
<ul>
<li>姓名：<input type="text" ng-control="name"></li>
<li>地址：<input type="text" ng-control="address"></li>
<li>电话：<input type="text" ng-control="telephone"></li>
</ul>
</div>
<div [ng-form-model]="controls1">
<ul>
<li>姓名1：<input type="text" ng-control="name1"></li>
<li>地址1：<input type="text" ng-control="address1"></li>
<li>电话1：<input type="text" ng-control="telephone1"></li>
</ul>
</div>
<pre>{{dump()}}</pre>
`,
styles:[`
div{background:#e1f5fe;}
ul{list-style:none;padding:10px;margin:0px;}
li{line-height:30px;}
`]
})
class EzApp{
constructor(){
this.controls = new ControlGroup({
name : new Control("Jason"),
address : new Control("London U.K."),
telephone : new Control("114")
});
this.controls1 = new ControlGroup({
name1 : new Control("Jason1"),
address1 : new Control("London U.K.1"),
telephone1 : new Control("1141")
});
}
dump(){
var ddd=
{
a: this.controls.value,
b: this.controls1.value
}
return JSON.stringify(ddd,null,"\t");
}
}
bootstrap(EzApp);
</script>
</body>
</html>

输入结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航