FormBuilder

class

npm Package	@angular/forms
Module	import { FormBuilder } from '@angular/forms';
Source	forms/src/form_builder.ts

Overview

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

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 = fb.group({
      name: fb.group({
        first: ['Nancy', Validators.minLength(2)],
        last: 'Drew',
      }),
      email: '',
    });
  }
}

• npm package: @angular/forms

• NgModule: ReactiveFormsModule

Members

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

Construct a new FormGroup with the given map of configuration. Valid keys for the extra parameter map are validator and asyncValidator.

See the FormGroup constructor for more details.

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

Construct a new FormControl with the given formState,validator, and asyncValidator.

formState can either be a standalone value for the form control or an object that contains both a value and a disabled status.

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

Construct a FormArray from the given controlsConfig array of configuration, with the given optional validator and asyncValidator.

Annotations

@Injectable()