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

:markdown
  Binds a control group to a DOM element.
  
  # Example
  
  In this example, we bind the control group to the form element, and we bind the login and password controls to the
  login and password elements.
  
  Here we use <a href="angular2/forms/FormDirectives-var"><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: "<form [control-group]='loginForm'>" +
               "Login <input type='text' control='login'>" +
               "Password <input type='password' control='password'>" +
               "<button (click)="onLogin()">Login</button>" +
               "</form>"
       })
  class LoginComp {
   loginForm:ControlGroup;
  
   constructor() {
     this.loginForm = new ControlGroup({
       login: new Control(""),
       password: new Control("")
     });
   }
  
   onLogin() {
     // this.loginForm.value
   }
  }
  
   ```
  
.l-main-section
  h2 Members
  .l-sub-section
    h3 constructor

    
    pre.prettyprint
      code.
        constructor(groupDirective:ControlGroupDirective)
    
    :markdown
      




  .l-sub-section
    h3 addDirective

    
    pre.prettyprint
      code.
        addDirective(c:ControlDirective)
    
    :markdown
      





  .l-sub-section
    h3 controlGroup

    
    pre.prettyprint
      code.
        controlGroup(controlGroup)
    
    :markdown
      





  .l-sub-section
    h3 findControl

    
    pre.prettyprint
      code.
        findControl(name:string)
    
    :markdown