{ "id": "api/forms/FormBuilder", "title": "FormBuilder", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

FormBuilderlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Creates an AbstractControl from a user-specified configuration.

\n\n

See more...

\n
\n \n \n \n
\n\nclass FormBuilder {\n group(controlsConfig: { [key: string]: any; }, options: AbstractControlOptions | { [key: string]: any; } = null): FormGroup\n control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl\n array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormArray\n}\n\n\n \n \n\n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n \n
\n

Descriptionlink

\n

The FormBuilder provides syntactic sugar that shortens creating instances of a FormControl,\nFormGroup, or FormArray. It reduces the amount of boilerplate needed to build complex\nforms.

\n\n \n
\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n group()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n
\n

Construct a new FormGroup instance.

\n\n
\n\n group(controlsConfig: { [key: string]: any; }, options?: AbstractControlOptions): FormGroup\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n controlsConfig\n object\n

A collection of child controls. The key for each child is the name\nunder which it is registered.

\n\n
\n \n options\n AbstractControlOptions\n

Configuration options object for the FormGroup. The object should have the\nthe AbstractControlOptions type and might contain the following fields:

\n
    \n
  • validators: A synchronous validator function, or an array of validator functions
    • \n
  • asyncValidators: A single async validator or array of async validator functions
    • \n
  • updateOn: The event upon which the control should be updated (options: 'change' | 'blur' |\nsubmit')\n
    • \n
\n

Optional. Default is undefined.

\n\n
\n\n \n
Returns
\n

FormGroup

\n\n \n\n\n \n\n \n
\n
\n
\n \n
\n

Construct a new FormGroup instance.

\n\n
\n\n group(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; }): FormGroup\n\n \n
\n

Deprecated This API is not typesafe and can result in issues with Closure Compiler renaming.\nUse the FormBuilder#group overload with AbstractControlOptions instead.\nNote that AbstractControlOptions expects validators and asyncValidators to be valid\nvalidators. If you have custom validators, make sure their validation function parameter is\nAbstractControl and not a sub-class, such as FormGroup. These functions will be called with\nan object of type AbstractControl and that cannot be automatically downcast to a subclass, so\nTypeScript sees this as an error. For example, change the (group: FormGroup) => ValidationErrors|null signature to be (group: AbstractControl) => ValidationErrors|null.

\n\n
\n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n controlsConfig\n object\n

A collection of child controls. The key for each child is the name\nunder which it is registered.

\n\n
\n \n options\n object\n

Configuration options object for the FormGroup. The legacy configuration\nobject consists of:

\n
    \n
  • validator: A synchronous validator function, or an array of validator functions
    • \n
  • asyncValidator: A single async validator or array of async validator functions\nNote: the legacy format is deprecated and might be removed in one of the next major versions\nof Angular.
    • \n
\n\n
\n\n \n
Returns
\n

FormGroup

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n control()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Construct a new FormControl with the given state, validators and options.

\n\n
\n
\n \n\n control(formState: any, validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n formState\n any\n

Initializes the control with an initial state value, or\nwith an object that contains both a value and a disabled status.

\n\n
\n \n validatorOrOpts\n ValidatorFn | AbstractControlOptions | ValidatorFn[]\n

A synchronous validator function, or an array of\nsuch functions, or an AbstractControlOptions object that contains\nvalidation functions and a validation trigger.

\n

Optional. Default is undefined.

\n\n
\n \n asyncValidator\n AsyncValidatorFn | AsyncValidatorFn[]\n

A single async validator or array of async validator\nfunctions.

\n

Optional. Default is undefined.

\n\n
\n\n \n
Returns
\n

FormControl

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Initialize a control as disabledlink
\n

The following example returns a control with an initial value in a disabled state.

\n\nimport {Component, Inject} from '@angular/core';\nimport {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';\n/* . . . */\n@Component({\n selector: 'app-disabled-form-control',\n template: `\n <input [formControl]=\"control\" placeholder=\"First\">\n `\n})\nexport class DisabledFormControlComponent {\n control: FormControl;\n\n constructor(private fb: FormBuilder) {\n this.control = fb.control({value: 'my val', disabled: true});\n }\n}\n\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n array()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Constructs a new FormArray from the given array of configurations,\nvalidators and options.

\n\n
\n
\n \n\n array(controlsConfig: any[], validatorOrOpts?: ValidatorFn | AbstractControlOptions | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormArray\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n controlsConfig\n any[]\n

An array of child controls or control configs. Each\nchild control is given an index when it is registered.

\n\n
\n \n validatorOrOpts\n ValidatorFn | AbstractControlOptions | ValidatorFn[]\n

A synchronous validator function, or an array of\nsuch functions, or an AbstractControlOptions object that contains\nvalidation functions and a validation trigger.

\n

Optional. Default is undefined.

\n\n
\n \n asyncValidator\n AsyncValidatorFn | AsyncValidatorFn[]\n

A single async validator or array of async validator\nfunctions.

\n

Optional. Default is undefined.

\n\n
\n\n \n
Returns
\n

FormArray

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n\n \n\n\n
\n
\n\n\n" }