angular-cn/public/docs/js/latest/api/forms/NgForm-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.ts#L19-L146">angular2/src/forms/directives/ng_form.ts (line 19)</a>

:markdown
  Creates and binds a form object to a DOM element.
  
  # Example
  
   ```
  @Component({selector: "signup-comp"})
  @View({
       directives: [FORM_DIRECTIVES],
       template: `
               <form #f="form" (submit)='onSignUp(f.value)'>
                 <div ng-control-group='credentials' #credentials="form">
                   Login <input type='text' ng-control='login'>
                   Password <input type='password' ng-control='password'>
                 </div>
                 <div *ng-if="!credentials.valid">Credentials are invalid</div>
  
                 <div ng-control-group='personal'>
                   Name <input type='text' ng-control='name'>
                 </div>
                 <button type='submit'>Sign Up!</button>
               </form>
       `})
  class SignupComp {
   onSignUp(value) {
     // value === {personal: {name: 'some name'},
     //  credentials: {login: 'some login', password: 'some password'}}
   }
  }
  
   ```
  
  

.l-main-section
  h2 Annotations
  .l-sub-section
    h3.annotation Directive
    pre.prettyprint
      code.
        @Directive({
          selector: &#39;form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]&#39;,
          bindings: [formDirectiveBinding],
          host: {
            &#39;(submit)&#39;: &#39;onSubmit()&#39;,
          },
          events: [&#39;ngSubmit&#39;],
          exportAs: &#39;form&#39;
        })


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

    
    pre.prettyprint
      code.
        constructor()
    
    :markdown
      
      




  .l-sub-section
    h3 form

    
    :markdown
      
      





  .l-sub-section
    h3 ngSubmit

    
    :markdown
      
      





  .l-sub-section
    h3 formDirective

    
    :markdown
      
      





  .l-sub-section
    h3 control

    
    :markdown
      
      





  .l-sub-section
    h3 path

    
    :markdown
      
      





  .l-sub-section
    h3 controls

    
    :markdown
      
      





  .l-sub-section
    h3 addControl

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





  .l-sub-section
    h3 getControl

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





  .l-sub-section
    h3 removeControl

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





  .l-sub-section
    h3 addControlGroup

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





  .l-sub-section
    h3 removeControlGroup

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





  .l-sub-section
    h3 getControlGroup

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





  .l-sub-section
    h3 updateModel

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





  .l-sub-section
    h3 onSubmit

    
    pre.prettyprint
      code.
        onSubmit()
    
    :markdown