The Ngformmodel directive is similar to the Ngcontrolgroup directive, which provides a container for the control. The difference, however, is that the Ngformmodel directive binds an existing group of controls to a DOM object:
1 @View ({2 Template: '3<!--bound control groups and control objects--4<div [ng-form-model]= "Controls" >5<input type= "text" ng-control= "name" >6<input type= "text" ng-control= "age" >7</div> '8 })9 class ezcomp{Ten Constructor () { One //creating control groups and control objects A this.controls = new Controlgroup ({ - name:new Control ("Jason"), - age:new Control (" the") the }); - } -}
The Ngformmodel directive can contain Ngcontrolgroup directives to group inputs of different natures.
For example:
1<!doctype html>234<meta charset= "Utf-8" >5<title>NgFor</title>6<script type= "Text/javascript" src= "Lib/[email protected]" ></script>7<script type= "Text/javascript" src= "Lib/angular2.dev.js" ></script>8<script type= "Text/javascript" src= "Lib/system.config.js" ></script>9Ten<body> One<ez-app></ez-app> A<script type= "Module" > -Import {Inject,component,view,bootstrap} from "Angular2/angular2"; -Import {control,controlgroup,formdirectives} from "Angular2/forms"; the -@Component ({selector: "Ez-app"}) - @View ({ - Directives:[formdirectives], + Template: ' -<div [ng-form-model]= "Controls" > +<ul> A<li> Name: <input type= "text" ng-control= "name" ></li> at<li> Address: <input type= "text" ng-control= "Address" ></li> -<li> Tel: <input type= "text" ng-control= "Telephone" ></li> -</ul> -</div> -<div [ng-form-model]= "CONTROLS1" > -<ul> in<li> name 1:<input type= "text" ng-control= "name1" ></li> -<li> address 1:<input type= "text" ng-control= "Address1" ></li> to<li> phone 1:<input type= "text" ng-control= "Telephone1" ></li> +</ul> -</div> the<pre>{{dump ()}}</pre> * `, $ styles:['Panax Notoginseng div{background: #e1f5fe;} -ul{list-style:none;padding:10px;margin:0px;} theli{line-height:30px;} + `] A }) the class ezapp{ + Constructor () { - This. Controls =NewControlgroup ({ $Name:NewControl ("Jason"), $Address:NewControl ("London U.K.")), -Telephone:NewControl ("114") - }); the this.controls1 = new Controlgroup ({ - name1:new Control ("Jason1"),Wuyi address1:new Control ("London u.k.1"), the telephone1:new Control ("1141") - }); Wu } - dump () { About var ddd= $ { - A:this.controls.value, - B:this.controls1.value - } A return json.stringify (ddd,null, "\ t"); + } the } - Bootstrap (Ezapp); $</script> the</body> theInput Result:
ANGULAR2 Component Development-form input (v)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
