125 lines
4.2 KiB
TypeScript
Raw Normal View History

import {Injectable} from 'angular2/src/core/di';
import {StringMapWrapper} from 'angular2/src/core/facade/collection';
import {isPresent, isArray, CONST_EXPR, Type} from 'angular2/src/core/facade/lang';
import * as modelModule from './model';
2015-03-10 18:12:50 -07:00
/**
2015-04-10 11:15:01 -07:00
* Creates a form object from a user-specified configuration.
*
* ### Example ([live demo](http://plnkr.co/edit/ENgZo8EuIECZNensZCVr?p=preview))
*
* ```typescript
2015-04-29 10:33:20 -05:00
* @Component({
* selector: 'my-app',
* viewBindings: [FORM_BINDINGS]
2015-04-29 10:33:20 -05:00
* template: `
* <form [ng-form-model]="loginForm">
* <p>Login <input ng-control="login"></p>
* <div ng-control-group="passwordRetry">
* <p>Password <input type="password" ng-control="password"></p>
* <p>Confirm password <input type="password" ng-control="passwordConfirmation"></p>
2015-04-29 10:33:20 -05:00
* </div>
* </form>
* <h3>Form value:</h3>
* <pre>{{value}}</pre>
2015-04-29 10:33:20 -05:00
* `,
* directives: [FORM_DIRECTIVES]
2015-04-29 10:33:20 -05:00
* })
* export class App {
2015-04-29 10:33:20 -05:00
* loginForm: ControlGroup;
*
2015-04-29 10:33:20 -05:00
* constructor(builder: FormBuilder) {
* this.loginForm = builder.group({
* login: ["", Validators.required],
* passwordRetry: builder.group({
* password: ["", Validators.required],
* passwordConfirmation: ["", Validators.required, asyncValidator]
2015-04-29 10:33:20 -05:00
* })
* });
* }
2015-04-10 11:15:01 -07:00
*
* get value(): string {
* return JSON.stringify(this.loginForm.value, null, 2);
* }
* }
2015-04-10 11:15:01 -07:00
* ```
*/
@Injectable()
2015-03-10 18:12:50 -07:00
export class FormBuilder {
/**
* Construct a new {@link ControlGroup} with the given map of configuration.
* Valid keys for the `extra` parameter map are `optionals` and `validator`.
*
* See the {@link ControlGroup} constructor for more details.
*/
group(controlsConfig: {[key: string]: any},
extra: {[key: string]: any} = 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;
var asyncValidator = isPresent(extra) ? StringMapWrapper.get(extra, "asyncValidator") : null;
return new modelModule.ControlGroup(controls, optionals, validator, asyncValidator);
2015-03-10 18:12:50 -07:00
}
/**
* Construct a new {@link Control} with the given `value`,`validator`, and `asyncValidator`.
*/
control(value: Object, validator: Function = null,
asyncValidator: Function = null): modelModule.Control {
return new modelModule.Control(value, validator, asyncValidator);
2015-03-10 18:12:50 -07:00
}
/**
* Construct an array of {@link Control}s from the given `controlsConfig` array of
* configuration, with the given optional `validator` and `asyncValidator`.
*/
array(controlsConfig: any[], validator: Function = null,
asyncValidator: Function = null): modelModule.ControlArray {
var controls = controlsConfig.map(c => this._createControl(c));
return new modelModule.ControlArray(controls, validator, asyncValidator);
}
/** @internal */
_reduceControls(controlsConfig: any): {[key: string]: modelModule.AbstractControl} {
var controls: {[key: string]: modelModule.AbstractControl} = {};
2015-03-10 18:12:50 -07:00
StringMapWrapper.forEach(controlsConfig, (controlConfig, controlName) => {
controls[controlName] = this._createControl(controlConfig);
});
return controls;
}
/** @internal */
_createControl(controlConfig: any): modelModule.AbstractControl {
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 (isArray(controlConfig)) {
var value = controlConfig[0];
2015-03-10 18:12:50 -07:00
var validator = controlConfig.length > 1 ? controlConfig[1] : null;
var asyncValidator = controlConfig.length > 2 ? controlConfig[2] : null;
return this.control(value, validator, asyncValidator);
2015-03-10 18:12:50 -07:00
} else {
return this.control(controlConfig);
}
}
2015-04-10 11:15:01 -07:00
}
/**
* Shorthand set of providers used for building Angular forms.
*
* ### Example
*
* ```typescript
* bootstrap(MyApp, [FORM_PROVIDERS]);
* ```
*/
export const FORM_PROVIDERS: Type[] = CONST_EXPR([FormBuilder]);
/**
* @deprecated
*/
export const FORM_BINDINGS = FORM_PROVIDERS;