FormBuilder

class

Creates an AbstractControl from a user-specified configuration.

See more...

class FormBuilder {
  group(controlsConfig: {...}, extra: {...}): FormGroup
  control(formState: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl
  array(controlsConfig: any[], validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormArray
}

See also

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

group()

Construct a new FormGroup instance.

group(controlsConfig: { [key: string]: any; }, extra: { [key: string]: any; } | null = null): FormGroup

Parameters

controlsConfig

A collection of child controls. The key for each child is the name under which it is registered.
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

Optional. Default is null.

Returns

FormGroup
control()

Construct a new FormControl instance.

control(formState: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormControl

Parameters

formState

Initializes the control with an initial value, or an object that defines the initial value and disabled state.
validator

A synchronous validator function, or an array of synchronous validator functions.

Optional. Default is undefined.
asyncValidator

A single async validator or array of async validator functions

Optional. Default is undefined.

Returns

FormControl

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});
  }
}
array()

Construct a new FormArray instance.

array(controlsConfig: any[], validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null): FormArray

Parameters

controlsConfig

An array of child controls. The key for each child control is its index in the array.
validator

A synchronous validator function, or an array of synchronous validator functions.

Optional. Default is undefined.
asyncValidator

A single async validator or array of async validator functions

Optional. Default is undefined.

Returns

FormArray

© 2010–2019 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v6.angular.io/api/forms/FormBuilder