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

p.location-badge.
  exported from <a href='../forms'>angular2/forms</a>
  defined in <a href="https://github.com/angular/angular/tree/master/modules/angular2/src/forms/form_builder.ts#L3-L125">angular2/src/forms/form_builder.ts (line 3)</a>

:markdown
  Creates a form object from a user-specified configuration.
  
  # Example
  
  ```
  import {Component, View, bootstrap} from 'angular2/angular2';
  import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
  
  @Component({
    selector: 'login-comp',
    appInjector: [
      FormBuilder
    ]
  })
  @View({
    template: `
      <form [control-group]="loginForm">
        Login <input control="login">
  
        <div control-group="passwordRetry">
          Password <input type="password" control="password">
          Confirm password <input type="password" control="passwordConfirmation">
        </div>
      </form>
    `,
    directives: [
      formDirectives
    ]
  })
  class LoginComp {
    loginForm: ControlGroup;
  
    constructor(builder: FormBuilder) {
      this.loginForm = builder.group({
        login: ["", Validators.required],
  
        passwordRetry: builder.group({
          password: ["", Validators.required],
          passwordConfirmation: ["", Validators.required]
        })
      });
    }
  }
  
  bootstrap(LoginComp)
  ```
  
  This example creates a <a href='ControlGroup-class.html'><code>ControlGroup</code></a> that consists of a `login` <a href='Control-class.html'><code>Control</code></a>, and a
  nested
  <a href='ControlGroup-class.html'><code>ControlGroup</code></a> that defines a `password` and a `passwordConfirmation` <a href='Control-class.html'><code>Control</code></a>:
  
  ```
   var loginForm = builder.group({
     login: ["", Validators.required],
  
     passwordRetry: builder.group({
       password: ["", Validators.required],
       passwordConfirmation: ["", Validators.required]
     })
   });
  
   ```
.l-main-section
  h2 Members
  .l-sub-section
    h3 array

    
    pre.prettyprint
      code.
        array(controlsConfig: List&lt;any&gt;, validator: Function = null)
    
    :markdown

      
      





  .l-sub-section
    h3 control

    
    pre.prettyprint
      code.
        control(value: Object, validator: Function = null)
    
    :markdown

      
      





  .l-sub-section
    h3 group

    
    pre.prettyprint
      code.
        group(controlsConfig: StringMap&lt;string, any&gt;, extra: StringMap&lt;string, any&gt; = null)
    
    :markdown