Creates an AbstractControl
from a user-specified configuration.
See more...
class FormBuilder {
group(controlsConfig: { [key: string]: any; }, options: AbstractControlOptions | { [key: string]: any; } = null): FormGroup
control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl
array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormArray
}
See also
Provided in
Description
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 forms.
Methods
|
Construct a new FormGroup instance.
group(controlsConfig: { [key: string]: any; }, options?: AbstractControlOptions): FormGroup
Parameters
controlsConfig
|
object
|
A collection of child controls. The key for each child is the name under which it is registered.
|
options
|
AbstractControlOptions
|
Configuration options object for the FormGroup . The object should have the the AbstractControlOptions type and might contain the following fields:
validators : A synchronous validator function, or an array of validator functions
asyncValidators : A single async validator or array of async validator functions
updateOn : The event upon which the control should be updated (options: 'change' | 'blur' | submit')
Optional. Default is undefined .
|
Returns
FormGroup
|
Construct a new FormGroup instance.
group(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; }): FormGroup
Deprecated This API is not typesafe and can result in issues with Closure Compiler renaming. Use the FormBuilder#group overload with AbstractControlOptions instead. Note that AbstractControlOptions expects validators and asyncValidators to be valid validators. If you have custom validators, make sure their validation function parameter is AbstractControl and not a sub-class, such as FormGroup . These functions will be called with an object of type AbstractControl and that cannot be automatically downcast to a subclass, so TypeScript sees this as an error. For example, change the (group: FormGroup) => ValidationErrors|null signature to be (group: AbstractControl) => ValidationErrors|null .
Parameters
controlsConfig
|
object
|
A collection of child controls. The key for each child is the name under which it is registered.
|
options
|
object
|
Configuration options object for the FormGroup . The legacy configuration object consists of:
validator : A synchronous validator function, or an array of validator functions
asyncValidator : A single async validator or array of async validator functions Note: the legacy format is deprecated and might be removed in one of the next major versions of Angular.
|
Returns
FormGroup
|
|
Construct a new FormControl with the given state, validators and options.
|
control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl
Parameters
formState
|
any
|
Initializes the control with an initial state value, or with an object that contains both a value and a disabled status.
|
validatorOrOpts
|
AbstractControlOptions | ValidatorFn[]
|
A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.
Optional. Default is undefined .
|
asyncValidator
|
AsyncValidatorFn[]
|
A single async validator or array of async validator functions.
Optional. Default is undefined .
|
Returns
FormControl
|
Usage Notes
Initialize a control as disabled
The following example returns a control with an initial value in a disabled state.
import {Component, Inject} from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
/* . . . */
@Component({
selector: 'app-disabled-form-control',
template: `
<input [formControl]="control" placeholder="First">
`
})
export class DisabledFormControlComponent {
control: FormControl;
constructor(private fb: FormBuilder) {
this.control = fb.control({value: 'my val', disabled: true});
}
}
|
|
Constructs a new FormArray from the given array of configurations, validators and options.
|
array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormArray
Parameters
controlsConfig
|
any[]
|
An array of child controls or control configs. Each child control is given an index when it is registered.
|
validatorOrOpts
|
AbstractControlOptions | ValidatorFn[]
|
A synchronous validator function, or an array of such functions, or an AbstractControlOptions object that contains validation functions and a validation trigger.
Optional. Default is undefined .
|
asyncValidator
|
AsyncValidatorFn[]
|
A single async validator or array of async validator functions.
Optional. Default is undefined .
|
Returns
FormArray
|