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

p.location-badge.
  exported from <a href="/angular2/forms.html">angular2/forms</a>
  defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/directives.js#L114">angular2/src/forms/directives.js (line 114)</a>

:markdown
  Binds a 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.
  
  Here we use <a href="FormDirectives-var.html"><code>FormDirectives</code></a>, rather than importing each form directive individually, e.g.
  `ControlDirective`, `ControlGroupDirective`. This is just a shorthand for the same end result.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [FormDirectives],
       inline: "<input type='text' [control]='loginControl'>"
       })
  class LoginComp {
   loginControl:Control;
  
   constructor() {
     this.loginControl = new Control('');
   }
  }
  
   ```
  
.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor(groupDirective:ControlGroupDirective, valueAccessor:DefaultValueAccessor)
    
    :markdown
      




  .l-sub-section
    h3 controlOrName

    
    :markdown
      





  .l-sub-section
    h3 onChange

    
    pre.prettyprint
      code.
        onChange(_)
    
    :markdown
      





  .l-sub-section
    h3 validator

    
    :markdown
      





  .l-sub-section
    h3 valueAccessor

    
    :markdown