What it does

Creates an 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.

How to use

To use, inject FormBuilder into your component class. You can then call its methods directly.

import {Component, Inject} from '@angular/core'; import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'example-app', template: ` <form [formGroup]="form"> <div formGroupName="name"> <input formControlName="first" placeholder="First"> <input formControlName="last" placeholder="Last"> </div> <input formControlName="email" placeholder="Email"> <button>Submit</button> </form> <p>Value: {{ form.value | json }}</p> <p>Validation status: {{ form.status }}</p> ` }) export class FormBuilderComp { form: FormGroup; constructor(@Inject(FormBuilder) fb: FormBuilder) { this.form ={ name:{ first: ['Nancy', Validators.minLength(2)], last: 'Drew', }), email: '', }); } }

Class Overview

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


Class Description



Class Details

exported from forms/index, defined in forms/src/form_builder.ts