Unlike the ngcontrolname directive, Ngformcontrol binds an existing control/control object to a DOM element. You can use the Ngformcontrol directive when you need to initialize an input value .
In the following code, using the Ngformcontrol directive to bind a DOM element to the member variable of the component Ezcomp movie, we need to create the control object first in the constructor :
1 @View ({2 //to bind an INPUT element to a control object that has already been created3Template: ' <input type= ' text '[ng-form-control]= "movie">`4 })5 class ezcomp{6 Constructor () {7 //To create a control object8 This.movie = new Control ("Matrix ii-reload");9 }Ten}
The control/control is an abstraction of the form INPUT element in Angular2, and we use its Value property to get the value of the corresponding INPUT element.
Another difference from the ngcontrolname directive is thatNgformcontrol does not require an ancestor of Ngform or Ngformmodel .
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 {Component,view,bootstrap} from "Angular2/angular2"; -Import {control,formdirectives} from "Angular2/forms"; the -@Component ({selector: "Ez-app"}) - @View ({ - Directives:[formdirectives], + Template: ' -<div> +<ul> A<!--bind input elements to control objects that have already been created- at<li> Name: <input type= "Text"[ng-form-control]= "name"></li> -<li> Address: <input type= "Text"[ng-form-control]= "Address"></li> -<li> Tel: <input type= "Text"[ng-form-control]= "Telephone"></li> -</ul> -</div> -<!--debugging: Dump model Information-- in<pre>{{dump ()}}</pre> - `, to styles:[' + form{background: #e1f5fe;} -ul{list-style:none;padding:10px;margin:0px;} theli{line-height:30px;} * `] $ })Panax Notoginseng class ezapp{ - Constructor () { the //To create a control object + this.name = new Control ("Jason"); A this.address = new Control ("London u.k."); the This.telephone = new Control ("the"); + } - dump () { $ //reading the value of a control object $ varval = { -Name: This. Name.value, -Address: This. Address.value, theTelephone: This. Telephone.value - }Wuyi returnJson.stringify (Val,NULL, "\ T"); the } - } Wu Bootstrap (Ezapp); -</script> About</body> $Output Result:
ANGULAR2 Component Development-form input (iv)
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
