2015-03-25 10:51:05 -07:00
|
|
|
import {StringMapWrapper, ListWrapper, List} from 'angular2/src/facade/collection';
|
2015-03-10 18:12:50 -07:00
|
|
|
import {isPresent} from 'angular2/src/facade/lang';
|
2015-03-09 17:41:49 +01:00
|
|
|
import * as modelModule from './model';
|
2015-03-10 18:12:50 -07:00
|
|
|
|
|
|
|
|
2015-03-31 22:47:11 +00:00
|
|
|
/**
|
2015-04-10 11:15:01 -07:00
|
|
|
* Creates a form object from a user-specified configuration.
|
|
|
|
*
|
|
|
|
* # Example
|
|
|
|
*
|
2015-04-29 10:33:20 -05:00
|
|
|
* ```
|
|
|
|
* import {Component, View, bootstrap} from 'angular2/angular2';
|
|
|
|
* import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
|
|
|
|
*
|
|
|
|
* @Component({
|
|
|
|
* selector: 'login-comp',
|
|
|
|
* injectables: [
|
|
|
|
* 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)
|
|
|
|
* ```
|
|
|
|
*
|
2015-04-17 13:01:07 -07:00
|
|
|
* This example creates a {@link ControlGroup} that consists of a `login` {@link Control}, and a nested
|
2015-04-29 10:33:20 -05:00
|
|
|
* {@link ControlGroup} that defines a `password` and a `passwordConfirmation` {@link Control}:
|
2015-04-10 11:15:01 -07:00
|
|
|
*
|
|
|
|
* ```
|
|
|
|
* var loginForm = builder.group({
|
|
|
|
* login: ["", Validators.required],
|
|
|
|
*
|
|
|
|
* passwordRetry: builder.group({
|
|
|
|
* password: ["", Validators.required],
|
|
|
|
* passwordConfirmation: ["", Validators.required]
|
|
|
|
* })
|
|
|
|
* });
|
|
|
|
*
|
|
|
|
* ```
|
2015-04-10 12:45:02 +02:00
|
|
|
* @exportedAs angular2/forms
|
2015-03-31 22:47:11 +00:00
|
|
|
*/
|
2015-03-10 18:12:50 -07:00
|
|
|
export class FormBuilder {
|
2015-03-09 17:41:49 +01:00
|
|
|
group(controlsConfig, extra = null):modelModule.ControlGroup {
|
2015-03-10 18:12:50 -07:00
|
|
|
var controls = this._reduceControls(controlsConfig);
|
|
|
|
var optionals = isPresent(extra) ? StringMapWrapper.get(extra, "optionals") : null;
|
|
|
|
var validator = isPresent(extra) ? StringMapWrapper.get(extra, "validator") : null;
|
|
|
|
|
|
|
|
if (isPresent(validator)) {
|
2015-03-09 17:41:49 +01:00
|
|
|
return new modelModule.ControlGroup(controls, optionals, validator);
|
2015-03-10 18:12:50 -07:00
|
|
|
} else {
|
2015-03-09 17:41:49 +01:00
|
|
|
return new modelModule.ControlGroup(controls, optionals);
|
2015-03-10 18:12:50 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-03-09 17:41:49 +01:00
|
|
|
control(value, validator:Function = null):modelModule.Control {
|
2015-03-10 18:12:50 -07:00
|
|
|
if (isPresent(validator)) {
|
2015-03-09 17:41:49 +01:00
|
|
|
return new modelModule.Control(value, validator);
|
2015-03-10 18:12:50 -07:00
|
|
|
} else {
|
2015-03-09 17:41:49 +01:00
|
|
|
return new modelModule.Control(value);
|
2015-03-10 18:12:50 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-03-25 10:51:05 -07:00
|
|
|
array(controlsConfig:List, validator:Function = null):modelModule.ControlArray {
|
|
|
|
var controls = ListWrapper.map(controlsConfig, (c) => this._createControl(c));
|
|
|
|
if (isPresent(validator)) {
|
|
|
|
return new modelModule.ControlArray(controls, validator);
|
|
|
|
} else {
|
|
|
|
return new modelModule.ControlArray(controls);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-03-10 18:12:50 -07:00
|
|
|
_reduceControls(controlsConfig) {
|
|
|
|
var controls = {};
|
|
|
|
StringMapWrapper.forEach(controlsConfig, (controlConfig, controlName) => {
|
|
|
|
controls[controlName] = this._createControl(controlConfig);
|
|
|
|
});
|
|
|
|
return controls;
|
|
|
|
}
|
|
|
|
|
|
|
|
_createControl(controlConfig) {
|
2015-03-25 10:51:05 -07:00
|
|
|
if (controlConfig instanceof modelModule.Control ||
|
|
|
|
controlConfig instanceof modelModule.ControlGroup ||
|
|
|
|
controlConfig instanceof modelModule.ControlArray) {
|
2015-03-10 18:12:50 -07:00
|
|
|
return controlConfig;
|
|
|
|
|
|
|
|
} else if (ListWrapper.isList(controlConfig)) {
|
|
|
|
var value = ListWrapper.get(controlConfig, 0);
|
|
|
|
var validator = controlConfig.length > 1 ? controlConfig[1] : null;
|
|
|
|
return this.control(value, validator);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
return this.control(controlConfig);
|
|
|
|
}
|
|
|
|
}
|
2015-04-10 11:15:01 -07:00
|
|
|
}
|