angular-docs-cn/public/docs/js/latest/api/forms/NgFormControl-class.jade

p.location-badge.
  exported from <a href='../forms'>angular2/forms</a>
  defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.34/modules/angular2/src/forms/directives/ng_form_control.ts#L14-L104">angular2/src/forms/directives/ng_form_control.ts (line 14)</a>

:markdown
  Binds an existing control to a DOM element.
  
  # Example
  
  In this example, we bind the control to an input element. When the value of the input element
  changes, the value of
  the control will reflect that change. Likewise, if the value of the control changes, the input
  element reflects that
  change.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [formDirectives],
       template: "<input type='text' [ng-form-control]='loginControl'>"
       })
  class LoginComp {
   loginControl:Control;
  
   constructor() {
     this.loginControl = new Control('');
   }
  }
  
   ```
  
  We can also use ng-model to bind a domain model to the form.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [formDirectives],
       template: "<input type='text' [ng-form-control]='loginControl' [(ng-model)]='login'>"
       })
  class LoginComp {
   loginControl:Control;
   login:string;
  
   constructor() {
     this.loginControl = new Control('');
   }
  }
   ```
  
  

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


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

    
    pre.prettyprint
      code.
        constructor(ngValidators: QueryList&lt;NgValidator&gt;)
    
    :markdown
      
      




  .l-sub-section
    h3 form

    
    :markdown
      
      





  .l-sub-section
    h3 update

    
    :markdown
      
      





  .l-sub-section
    h3 model

    
    :markdown
      
      





  .l-sub-section
    h3 viewModel

    
    :markdown
      
      





  .l-sub-section
    h3 ngValidators

    
    :markdown
      
      





  .l-sub-section
    h3 onChange

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





  .l-sub-section
    h3 path

    
    :markdown
      
      





  .l-sub-section
    h3 control

    
    :markdown
      
      





  .l-sub-section
    h3 validator

    
    :markdown
      
      





  .l-sub-section
    h3 viewToModelUpdate

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