2016-06-08 18:36:24 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
2016-06-08 19:38:52 -04:00
|
|
|
|
2016-06-08 18:36:24 -04:00
|
|
|
import {StringMapWrapper} from '../facade/collection';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {isArray, isPresent} from '../facade/lang';
|
|
|
|
|
|
|
|
import {AsyncValidatorFn, ValidatorFn} from './directives/validators';
|
2016-06-08 18:36:24 -04:00
|
|
|
import * as modelModule from './model';
|
2016-06-08 19:38:52 -04:00
|
|
|
|
2016-06-08 18:36:24 -04:00
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Creates a form object from a user-specified configuration.
|
|
|
|
*
|
|
|
|
* ```typescript
|
|
|
|
* @Component({
|
|
|
|
* selector: 'my-app',
|
|
|
|
* template: `
|
2016-06-10 22:10:17 -04:00
|
|
|
* <form [formGroup]="loginForm">
|
2016-06-12 16:17:07 -04:00
|
|
|
* <p>Login <input formControlName="login"></p>
|
2016-06-08 18:36:24 -04:00
|
|
|
* <div ngControlGroup="passwordRetry">
|
2016-06-12 16:17:07 -04:00
|
|
|
* <p>Password <input type="password" formControlName="password"></p>
|
|
|
|
* <p>Confirm password <input type="password" formControlName="passwordConfirmation"></p>
|
2016-06-08 18:36:24 -04:00
|
|
|
* </div>
|
|
|
|
* </form>
|
|
|
|
* <h3>Form value:</h3>
|
|
|
|
* <pre>{{value}}</pre>
|
|
|
|
* `,
|
2016-06-12 16:17:07 -04:00
|
|
|
* directives: [REACTIVE_FORM_DIRECTIVES]
|
2016-06-08 18:36:24 -04:00
|
|
|
* })
|
|
|
|
* export class App {
|
2016-06-10 14:15:59 -04:00
|
|
|
* loginForm: FormGroup;
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
|
|
|
* constructor(builder: FormBuilder) {
|
|
|
|
* this.loginForm = builder.group({
|
|
|
|
* login: ["", Validators.required],
|
|
|
|
* passwordRetry: builder.group({
|
|
|
|
* password: ["", Validators.required],
|
|
|
|
* passwordConfirmation: ["", Validators.required, asyncValidator]
|
|
|
|
* })
|
|
|
|
* });
|
|
|
|
* }
|
|
|
|
*
|
|
|
|
* get value(): string {
|
|
|
|
* return JSON.stringify(this.loginForm.value, null, 2);
|
|
|
|
* }
|
|
|
|
* }
|
|
|
|
* ```
|
|
|
|
*
|
|
|
|
* @experimental
|
|
|
|
*/
|
|
|
|
@Injectable()
|
|
|
|
export class FormBuilder {
|
|
|
|
/**
|
2016-06-10 14:15:59 -04:00
|
|
|
* Construct a new {@link FormGroup} with the given map of configuration.
|
2016-06-08 18:36:24 -04:00
|
|
|
* Valid keys for the `extra` parameter map are `optionals` and `validator`.
|
|
|
|
*
|
2016-06-10 14:15:59 -04:00
|
|
|
* See the {@link FormGroup} constructor for more details.
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
2016-06-08 19:38:52 -04:00
|
|
|
group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null):
|
2016-06-10 14:15:59 -04:00
|
|
|
modelModule.FormGroup {
|
2016-06-08 18:36:24 -04:00
|
|
|
var controls = this._reduceControls(controlsConfig);
|
|
|
|
var optionals = <{[key: string]: boolean}>(
|
2016-06-08 19:38:52 -04:00
|
|
|
isPresent(extra) ? StringMapWrapper.get(extra, 'optionals') : null);
|
|
|
|
var validator: ValidatorFn = isPresent(extra) ? StringMapWrapper.get(extra, 'validator') : null;
|
2016-06-08 18:36:24 -04:00
|
|
|
var asyncValidator: AsyncValidatorFn =
|
2016-06-08 19:38:52 -04:00
|
|
|
isPresent(extra) ? StringMapWrapper.get(extra, 'asyncValidator') : null;
|
2016-06-10 14:15:59 -04:00
|
|
|
return new modelModule.FormGroup(controls, optionals, validator, asyncValidator);
|
2016-06-08 18:36:24 -04:00
|
|
|
}
|
|
|
|
/**
|
2016-06-10 14:15:59 -04:00
|
|
|
* Construct a new {@link FormControl} with the given `value`,`validator`, and `asyncValidator`.
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
2016-06-08 19:38:52 -04:00
|
|
|
control(value: Object, validator: ValidatorFn = null, asyncValidator: AsyncValidatorFn = null):
|
2016-06-10 14:15:59 -04:00
|
|
|
modelModule.FormControl {
|
|
|
|
return new modelModule.FormControl(value, validator, asyncValidator);
|
2016-06-08 18:36:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2016-06-10 14:15:59 -04:00
|
|
|
* Construct an array of {@link FormControl}s from the given `controlsConfig` array of
|
2016-06-08 18:36:24 -04:00
|
|
|
* configuration, with the given optional `validator` and `asyncValidator`.
|
|
|
|
*/
|
2016-06-08 19:38:52 -04:00
|
|
|
array(
|
|
|
|
controlsConfig: any[], validator: ValidatorFn = null,
|
2016-06-10 14:15:59 -04:00
|
|
|
asyncValidator: AsyncValidatorFn = null): modelModule.FormArray {
|
2016-06-08 18:36:24 -04:00
|
|
|
var controls = controlsConfig.map(c => this._createControl(c));
|
2016-06-10 14:15:59 -04:00
|
|
|
return new modelModule.FormArray(controls, validator, asyncValidator);
|
2016-06-08 18:36:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
/** @internal */
|
2016-06-08 19:38:52 -04:00
|
|
|
_reduceControls(controlsConfig: {[k: string]: any}):
|
|
|
|
{[key: string]: modelModule.AbstractControl} {
|
2016-06-08 18:36:24 -04:00
|
|
|
var controls: {[key: string]: modelModule.AbstractControl} = {};
|
|
|
|
StringMapWrapper.forEach(controlsConfig, (controlConfig: any, controlName: string) => {
|
|
|
|
controls[controlName] = this._createControl(controlConfig);
|
|
|
|
});
|
|
|
|
return controls;
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @internal */
|
|
|
|
_createControl(controlConfig: any): modelModule.AbstractControl {
|
2016-06-10 14:15:59 -04:00
|
|
|
if (controlConfig instanceof modelModule.FormControl ||
|
|
|
|
controlConfig instanceof modelModule.FormGroup ||
|
|
|
|
controlConfig instanceof modelModule.FormArray) {
|
2016-06-08 18:36:24 -04:00
|
|
|
return controlConfig;
|
|
|
|
|
|
|
|
} else if (isArray(controlConfig)) {
|
|
|
|
var value = controlConfig[0];
|
|
|
|
var validator: ValidatorFn = controlConfig.length > 1 ? controlConfig[1] : null;
|
|
|
|
var asyncValidator: AsyncValidatorFn = controlConfig.length > 2 ? controlConfig[2] : null;
|
|
|
|
return this.control(value, validator, asyncValidator);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
return this.control(controlConfig);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|