Angular 2 FormBuilder Example

FormBuilder is another way to create/build froms in Angular 2.

FormBuilder allows us to build a form programmatically.

angular 2 formbuilder example
angular 2 formbuilder example

 

Try it Yourself , Live example

try angular 2 formbuilder
try angular 2 formbuilder

 

FormBuilder can accept:

  • Group of Controls (ControlGroup).
  • A control (one Control: [‘name’, required]).
  • An array of Controls.

                                  

angular 2 formbuilder
angular 2 formbuilder

We create our component: angular-2-formbuilder.component.ts

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';
import {ControlGroup,FormBuilder, Validators } from 'angular2/common';
import {CORE_DIRECTIVES} from 'angular2/common';
import {FORM_DIRECTIVES} from 'angular2/common';

@Component({
    selector: 'angular-2-form-builder',
    templateUrl: 'app/angular-2-formbuilder.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class Angular2FormBuilderExampleComponent {
    carFormGroup: ControlGroup; // this is our Form used to insert a Car

    constructor(private _builder:FormBuilder) {// in our Constructor we inject the FormBuilder (we create a private variable _builder)
       this.carFormGroup = this._builder.group({ // we create our Form with the FormBuilder (3 elements)
                carName: ['', Validators.required],//we add a validator with Validators
                carColor: ['', Validators.required],
                carDoors: ['', Validators.required],
        });
    }
    get carFormGroupValue(): string { //this method returns the content of our carForm (we use it in our Template)
        return JSON.stringify(this.carFormGroup.value, null, 2);
    }
}

 

bind a From ControlGroup
bind a From ControlGroup

To bind our From ControlGroup (carFormGroup) to our View (DOM Elements) we use this syntax in our Template:

<form [ngFormModel]=”carFormGroup” >

 

we create our form (HTML template)
we create our form (HTML template)

 

We create our HTML template (Form): angular-2-formbuilder.html

<div>
    <h3 class="text-primary">Angular 2 FormBuilder Example - AngularTypescript</h3>
    <form [ngFormModel]="carFormGroup" >
            <div class="form-group">
                <label class="col-xs-2 control-label text-muted" >Name : <span *ngIf="!carFormGroup.controls['carName'].valid">( required )</span> </label>
                <div class="col-xs-10">
                    <input class="form-control"
                           type="text"
                           [ngFormControl]="carFormGroup.controls['carName']"
                    >
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label text-muted" >Color : <span *ngIf="!carFormGroup.controls['carColor'].valid">( required )</span> </label>
                <div class="col-xs-10">
                    <input class="form-control" type="text"
                           [ngFormControl]="carFormGroup.controls['carColor']"
                    >
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label text-muted" >Doors : <span *ngIf="!carFormGroup.controls['carDoors'].valid">( required )</span> </label>
                <div class="col-xs-10">
                    <input class="form-control" type="text"
                           [ngFormControl]="carFormGroup.controls['carDoors']"
                    >
                </div>
            </div>

    </form>
    <h3>Our Form value : </h3>
    <pre>{{carFormGroupValue}}</pre>
    <h3>Is our Form Valid ?</h3>
    <pre>{{carFormGroup.valid}}</pre>
</div>

To bind a Control to a DOM Element (e.g. <input type=”text” ….>) we use this syntax inside the DOM element:

[ngFormControl]=”carFormGroup.controls[‘carName’]”

 

  1. We bootstrap our application: main.ts
  2. We run our application : index.html

Done !