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-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
|
|
|
/**
|
2018-04-05 06:02:42 -04:00
|
|
|
* @description
|
2018-04-05 05:58:12 -04:00
|
|
|
* Creates an `AbstractControl` from a user-specified configuration.
|
2016-09-13 16:23:31 -04:00
|
|
|
*
|
2018-06-27 15:33:16 -04:00
|
|
|
* The `FormBuilder` provides syntactic sugar that shortens creating instances of a `FormControl`,
|
|
|
|
* `FormGroup`, or `FormArray`. It reduces the amount of boilerplate needed to build complex
|
2016-09-13 16:23:31 -04:00
|
|
|
* forms.
|
|
|
|
*
|
2018-06-27 15:33:16 -04:00
|
|
|
* @see [Reactive Forms Guide](/guide/reactive-forms)
|
2018-04-05 17:31:44 -04:00
|
|
|
*
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
|
|
|
@Injectable()
|
|
|
|
export class FormBuilder {
|
|
|
|
/**
|
2018-06-27 15:33:16 -04:00
|
|
|
* @description
|
|
|
|
* Construct a new `FormGroup` instance.
|
|
|
|
*
|
|
|
|
* @param controlsConfig A collection of child controls. The key for each child is the name
|
|
|
|
* under which it is registered.
|
|
|
|
*
|
|
|
|
* @param extra An object of configuration options for the `FormGroup`.
|
|
|
|
* * `validator`: A synchronous validator function, or an array of validator functions
|
|
|
|
* * `asyncValidator`: A single async validator or array of async validator functions
|
2016-06-08 18:36:24 -04:00
|
|
|
*
|
|
|
|
*/
|
2017-04-17 14:13:30 -04:00
|
|
|
group(controlsConfig: {[key: string]: any}, extra: {[key: string]: any}|null = null): FormGroup {
|
2016-08-24 19:58:43 -04:00
|
|
|
const controls = this._reduceControls(controlsConfig);
|
2017-03-02 12:37:01 -05:00
|
|
|
const validator: ValidatorFn = extra != null ? extra['validator'] : null;
|
|
|
|
const asyncValidator: AsyncValidatorFn = extra != null ? 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
|
|
|
}
|
2018-06-27 15:33:16 -04:00
|
|
|
|
2016-06-08 18:36:24 -04:00
|
|
|
/**
|
2018-06-27 15:33:16 -04:00
|
|
|
* @description
|
|
|
|
* Construct a new `FormControl` instance.
|
|
|
|
*
|
|
|
|
* @param formState Initializes the control with an initial value,
|
|
|
|
* or an object that defines the initial value and disabled state.
|
2016-09-13 16:23:31 -04:00
|
|
|
*
|
2018-06-27 15:33:16 -04:00
|
|
|
* @param validator A synchronous validator function, or an array of synchronous validator
|
|
|
|
* functions.
|
|
|
|
*
|
|
|
|
* @param asyncValidator A single async validator or array of async validator functions
|
|
|
|
*
|
|
|
|
* @usageNotes
|
|
|
|
*
|
|
|
|
* ### Initialize a control as disabled
|
|
|
|
*
|
|
|
|
* The following example returns a control with an initial value in a disabled state.
|
|
|
|
*
|
|
|
|
* <code-example path="forms/ts/formBuilder/form_builder_example.ts"
|
|
|
|
* linenums="false" region="disabled-control">
|
|
|
|
* </code-example>
|
2016-09-13 16:23:31 -04:00
|
|
|
*
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
2016-06-13 14:27:04 -04:00
|
|
|
control(
|
2017-12-09 13:17:49 -05:00
|
|
|
formState: any, validator?: ValidatorFn|ValidatorFn[]|null,
|
2017-04-17 14:13:30 -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
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
2018-06-27 15:33:16 -04:00
|
|
|
* @description
|
|
|
|
* Construct a new `FormArray` instance.
|
|
|
|
*
|
|
|
|
* @param controlsConfig An array of child controls. The key for each child control is its index
|
|
|
|
* in the array.
|
|
|
|
*
|
|
|
|
* @param validator A synchronous validator function, or an array of synchronous validator
|
|
|
|
* functions.
|
|
|
|
*
|
|
|
|
* @param asyncValidator A single async validator or array of async validator functions
|
2016-06-08 18:36:24 -04:00
|
|
|
*/
|
2016-06-08 19:38:52 -04:00
|
|
|
array(
|
2017-12-03 15:48:45 -05:00
|
|
|
controlsConfig: any[], validator?: ValidatorFn|ValidatorFn[]|null,
|
|
|
|
asyncValidator?: AsyncValidatorFn|AsyncValidatorFn[]|null): FormArray {
|
2016-11-12 08:08:58 -05:00
|
|
|
const 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} {
|
2016-11-12 08:08:58 -05:00
|
|
|
const controls: {[key: string]: AbstractControl} = {};
|
2016-10-03 19:46:05 -04:00
|
|
|
Object.keys(controlsConfig).forEach(controlName => {
|
|
|
|
controls[controlName] = this._createControl(controlsConfig[controlName]);
|
2016-06-08 18:36:24 -04:00
|
|
|
});
|
|
|
|
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;
|
|
|
|
|
2016-10-19 16:42:39 -04:00
|
|
|
} else if (Array.isArray(controlConfig)) {
|
|
|
|
const value = controlConfig[0];
|
|
|
|
const validator: ValidatorFn = controlConfig.length > 1 ? controlConfig[1] : null;
|
|
|
|
const asyncValidator: AsyncValidatorFn = controlConfig.length > 2 ? controlConfig[2] : null;
|
2016-06-08 18:36:24 -04:00
|
|
|
return this.control(value, validator, asyncValidator);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
return this.control(controlConfig);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|