2016-06-23 12:47:54 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2016-06-08 18:36:24 -04:00
|
|
|
import {Injectable} from '@angular/core';
|
2016-06-08 19:38:52 -04:00
|
|
|
|
|
|
|
import {AsyncValidatorFn, ValidatorFn} from './directives/validators';
|
2016-06-14 21:23:40 -04:00
|
|
|
import {StringMapWrapper} from './facade/collection';
|
|
|
|
import {isArray, isPresent} from './facade/lang';
|
2016-06-22 17:56:10 -04:00
|
|
|
import {AbstractControl, FormArray, FormControl, FormGroup} from './model';
|
2016-06-08 19:38:52 -04:00
|
|
|
|
2016-06-08 18:36:24 -04:00
|
|
|
/**
|
2016-09-13 16:23:31 -04:00
|
|
|
* @whatItDoes Creates an {@link AbstractControl} from a user-specified configuration.
|
|
|
|
*
|
|
|
|
* It is essentially syntactic sugar that shortens the `new FormGroup()`,
|
|
|
|
* `new FormControl()`, and `new FormArray()` boilerplate that can build up in larger
|
|
|
|
* forms.
|
|
|
|
*
|
|
|
|
* @howToUse
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
2016-09-13 16:23:31 -04:00
|
|
|
* To use, inject `FormBuilder` into your component class. You can then call its methods
|
|
|
|
* directly.
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
2016-09-13 16:23:31 -04:00
|
|
|
* {@example forms/ts/formBuilder/form_builder_example.ts region='Component'}
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
2016-09-13 16:23:31 -04:00
|
|
|
* * **npm package**: `@angular/forms`
|
|
|
|
*
|
|
|
|
* * **NgModule**: {@link ReactiveFormsModule}
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
2016-08-17 10:44:39 -04:00
|
|
|
* @stable
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
|
|
|
@Injectable()
|
|
|
|
export class FormBuilder {
|
|
|
|
/**
|
2016-06-10 14:15:59 -04:00
|
|
|
* Construct a new {@link FormGroup} with the given map of configuration.
|
2016-09-13 16:23:31 -04:00
|
|
|
* Valid keys for the `extra` parameter map are `validator` and `asyncValidator`.
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
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-22 17:56:10 -04:00
|
|
|
group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any} = null): FormGroup {
|
2016-08-24 19:58:43 -04:00
|
|
|
const controls = this._reduceControls(controlsConfig);
|
|
|
|
const validator: ValidatorFn =
|
|
|
|
isPresent(extra) ? StringMapWrapper.get(extra, 'validator') : null;
|
|
|
|
const asyncValidator: AsyncValidatorFn =
|
2016-06-08 19:38:52 -04:00
|
|
|
isPresent(extra) ? StringMapWrapper.get(extra, 'asyncValidator') : null;
|
2016-08-24 19:58:43 -04:00
|
|
|
return new FormGroup(controls, validator, asyncValidator);
|
2016-06-08 18:36:24 -04:00
|
|
|
}
|
|
|
|
/**
|
2016-08-24 19:58:43 -04:00
|
|
|
* Construct a new {@link FormControl} with the given `formState`,`validator`, and
|
|
|
|
* `asyncValidator`.
|
2016-09-13 16:23:31 -04:00
|
|
|
*
|
|
|
|
* `formState` can either be a standalone value for the form control or an object
|
|
|
|
* that contains both a value and a disabled status.
|
|
|
|
*
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
2016-06-13 14:27:04 -04:00
|
|
|
control(
|
2016-08-24 19:58:43 -04:00
|
|
|
formState: Object, validator: ValidatorFn|ValidatorFn[] = null,
|
2016-06-22 17:56:10 -04:00
|
|
|
asyncValidator: AsyncValidatorFn|AsyncValidatorFn[] = null): FormControl {
|
2016-08-24 19:58:43 -04:00
|
|
|
return new FormControl(formState, validator, asyncValidator);
|
2016-06-08 18:36:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2016-09-13 16:23:31 -04:00
|
|
|
* Construct a {@link FormArray} 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-22 17:56:10 -04:00
|
|
|
asyncValidator: AsyncValidatorFn = null): FormArray {
|
2016-06-08 18:36:24 -04:00
|
|
|
var controls = controlsConfig.map(c => this._createControl(c));
|
2016-06-22 17:56:10 -04:00
|
|
|
return new FormArray(controls, validator, asyncValidator);
|
2016-06-08 18:36:24 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
/** @internal */
|
2016-06-22 17:56:10 -04:00
|
|
|
_reduceControls(controlsConfig: {[k: string]: any}): {[key: string]: AbstractControl} {
|
|
|
|
var controls: {[key: string]: AbstractControl} = {};
|
2016-06-08 18:36:24 -04:00
|
|
|
StringMapWrapper.forEach(controlsConfig, (controlConfig: any, controlName: string) => {
|
|
|
|
controls[controlName] = this._createControl(controlConfig);
|
|
|
|
});
|
|
|
|
return controls;
|
|
|
|
}
|
|
|
|
|
|
|
|
/** @internal */
|
2016-06-22 17:56:10 -04:00
|
|
|
_createControl(controlConfig: any): AbstractControl {
|
|
|
|
if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
|
|
|
|
controlConfig instanceof 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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|