
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_form_model.ts#L16-L143">angular2/src/core/forms/directives/ng_form_model.ts (line 16)</a>

:markdown
  Binds an existing 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.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [FORM_DIRECTIVES],
       template: `
         <form [ng-form-model]='loginForm'>
           Login <input type='text' ng-control='login'>
           Password <input type='password' ng-control='password'>
           <button (click)="onLogin()">Login</button>
         </form>`
       })
  class LoginComp {
   loginForm: ControlGroup;
  
   constructor() {
     this.loginForm = new ControlGroup({
       login: new Control(""),
       password: new Control("")
     });
   }
  
   onLogin(): void {
     // this.loginForm.value
   }
  }
  
   ```
  
  We can also use ng-model to bind a domain model to the form.
  
   ```
  @Component({selector: "login-comp"})
  @View({
       directives: [FORM_DIRECTIVES],
       template: `
         <form [ng-form-model]='loginForm'>
           Login <input type='text' ng-control='login' [(ng-model)]='credentials.login'>
           Password <input type='password' ng-control='password'
                           [(ng-model)]='credentials.password'>
           <button (click)="onLogin()">Login</button>
         </form>`
       })
  class LoginComp {
   credentials: {login: string, password: string};
   loginForm: ControlGroup;
  
   constructor() {
     this.loginForm = new ControlGroup({
       login: new Control(""),
       password: new Control("")
     });
   }
  
   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-form-model]&#39;,
          bindings: [formDirectiveBinding],
          properties: [&#39;form: ng-form-model&#39;],
          host: {&#39;(submit)&#39;: &#39;onSubmit()&#39;},
          events: [&#39;ngSubmit&#39;],
          exportAs: &#39;form&#39;
        })


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

    
    :markdown





  .l-sub-section
    h3#directives directives

    
    :markdown





  .l-sub-section
    h3#ngSubmit ngSubmit

    
    :markdown





  .l-sub-section
    h3#onChanges onChanges

    
    pre.prettyprint
      code.
        onChanges(_: any)
    
    :markdown





  .l-sub-section
    h3#formDirective formDirective

    
    :markdown





  .l-sub-section
    h3#control control

    
    :markdown





  .l-sub-section
    h3#path path

    
    :markdown





  .l-sub-section
    h3#addControl addControl

    
    pre.prettyprint
      code.
        addControl(dir: NgControl)
    
    :markdown





  .l-sub-section
    h3#getControl getControl

    
    pre.prettyprint
      code.
        getControl(dir: NgControl)
    
    :markdown





  .l-sub-section
    h3#removeControl removeControl

    
    pre.prettyprint
      code.
        removeControl(dir: NgControl)
    
    :markdown





  .l-sub-section
    h3#addControlGroup addControlGroup

    
    pre.prettyprint
      code.
        addControlGroup(dir: NgControlGroup)
    
    :markdown





  .l-sub-section
    h3#removeControlGroup removeControlGroup

    
    pre.prettyprint
      code.
        removeControlGroup(dir: NgControlGroup)
    
    :markdown





  .l-sub-section
    h3#getControlGroup getControlGroup

    
    pre.prettyprint
      code.
        getControlGroup(dir: NgControlGroup)
    
    :markdown





  .l-sub-section
    h3#updateModel updateModel

    
    pre.prettyprint
      code.
        updateModel(dir: NgControl, value: any)
    
    :markdown





  .l-sub-section
    h3#onSubmit onSubmit

    
    pre.prettyprint
      code.
        onSubmit()
    
    :markdown




