
p.location-badge.
  exported from <a href='../core'>angular2/core</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.37/modules/angular2/src/core/forms/directives/ng_control_name.ts#L16-L121">angular2/src/core/forms/directives/ng_control_name.ts (line 16)</a>

:markdown
  Creates and binds a control with a specified name to a DOM element.
  
  This directive can only be used as a child of <a href='NgForm-class.html'><code>NgForm</code></a> or <a href='NgFormModel-class.html'><code>NgFormModel</code></a>.
  
  # Example
  
  In this example, we create the login and password controls.
  We can work with each control separately: check its validity, get its value, listen to its
  changes.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [FORM_DIRECTIVES],
       template: `
         <form #f="form" (submit)='onLogIn(f.value)'>
           Login <input type='text' ng-control='login' #l="form">
           <div *ng-if="!l.valid">Login is invalid</div>
  
           Password <input type='password' ng-control='password'>
           <button type='submit'>Log in!</button>
         </form>
       `})
  class LoginComp {
   onLogIn(value): void {
     // value === {login: 'some login', password: 'some password'}
   }
  }
   ```
  
  We can also use ng-model to bind a domain model to the form.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [FORM_DIRECTIVES],
       template: `
         <form (submit)='onLogIn()'>
           Login <input type='text' ng-control='login' [(ng-model)]="credentials.login">
           Password <input type='password' ng-control='password'
                           [(ng-model)]="credentials.password">
           <button type='submit'>Log in!</button>
         </form>
       `})
  class LoginComp {
   credentials: {login:string, password:string};
  
   onLogIn(): void {
     // this.credentials.login === "some login"
     // this.credentials.password === "some password"
   }
  }
   ```
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation Directive
    pre.prettyprint
      code.
        @Directive({
          selector: &#39;[ng-control]&#39;,
          bindings: [controlNameBinding],
          properties: [&#39;name: ngControl&#39;, &#39;model: ngModel&#39;],
          events: [&#39;update: ngModel&#39;],
          exportAs: &#39;form&#39;
        })


.l-main-section
  h2 Members
  .l-sub-section
    h3#constructor constructor

    
    pre.prettyprint
      code.
        constructor(parent: ControlContainer, validators: Function[])
    
    :markdown




  .l-sub-section
    h3#update update

    
    :markdown





  .l-sub-section
    h3#model model

    
    :markdown





  .l-sub-section
    h3#viewModel viewModel

    
    :markdown





  .l-sub-section
    h3#validators validators

    
    :markdown





  .l-sub-section
    h3#onChanges onChanges

    
    pre.prettyprint
      code.
        onChanges(changes: StringMap&lt;string, any&gt;)
    
    :markdown





  .l-sub-section
    h3#onDestroy onDestroy

    
    pre.prettyprint
      code.
        onDestroy()
    
    :markdown





  .l-sub-section
    h3#viewToModelUpdate viewToModelUpdate

    
    pre.prettyprint
      code.
        viewToModelUpdate(newValue: any)
    
    :markdown





  .l-sub-section
    h3#path path

    
    :markdown





  .l-sub-section
    h3#formDirective formDirective

    
    :markdown





  .l-sub-section
    h3#control control

    
    :markdown





  .l-sub-section
    h3#validator validator

    
    :markdown




