130 lines
2.6 KiB
Plaintext
130 lines
2.6 KiB
Plaintext
|
|
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/form_builder.ts#L4-L126">angular2/src/forms/form_builder.ts (line 4)</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',
|
|
viewBindings: [
|
|
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 Annotations
|
|
.l-sub-section
|
|
h3.annotation Injectable
|
|
pre.prettyprint
|
|
code.
|
|
@Injectable()
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 group
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
group(controlsConfig: StringMap<string, any>, extra?: StringMap<string, any>)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 control
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
control(value: Object, validator?: Function)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 array
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
array(controlsConfig: List<any>, validator?: Function)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|