Angular 2 ControlGroup Example

ControlGroup allows us to create a group of controls (elements e.g. input).

angular 2 controlgroup example typescript
angular 2 controlgroup example typescript

The length of ControlGroup is not variable.

 

If it’s your first time with Angular 2, Please check our hello world (step by step + npm and environment setup) tutorial here. To be able to run this example.

 

ControlGroup contains the values and all errors related to each control (or element) in the group.

If case a control (element) in a ControlGroup is invalid the entire group becomes invalid.

When the value of a control (element) is changed, the value of the group is changed too.

 

Step 1

We create our component: angular-2-controlgroup-example.component.ts

 

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

@Component({
    selector: 'angular-2-control-group',
    templateUrl: '../../../app/core/angular2common/ControlGroup/controlgroup-app.component.html',
    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class Angular2ControlGroupExampleComponent implements OnInit {
    formGroup: ControlGroup; // this ControlGroup will contain our Form

    constructor(private _builder:FormBuilder) {} // in our Constructor we inject the FormBuilder (we create a private variable _builder)

    ngOnInit() : any { // we create our Form
        this.formGroup = this._builder.group({
            myCar: this._builder.group({
                inputTextCtrl1: ['', Validators.required],
                inputTextCtrl2: ['', Validators.required],
                inputTextCtrl3: ['', Validators.required],
            }),
            vendor: ['', Validators.required],
        });
    }

    get controlGroupValue(): string { //this method returns the content of our Form
        return JSON.stringify(this.formGroup.value, null, 2);
    }

}

Step 2

We create our component: controlgroup-app.component.html

In our Html Template:

  • We bind our From (controlGroup) to our View. With : [ngFormModel]=”formGroup
  • We use this syntax to bind our Controls:
  • [ngFormControl]=”formGroup.controls[‘myCar’].controls[‘inputTextCtrl1’]”
  • Where formGroup is our
<div>
    <h3>Angular 2 ControlGroup Example - Typescript</h3>
    <form [ngFormModel]="formGroup"   >

        <div ngControlGroup="myCar">
            <div class="form-group">
                <label class="col-xs-2 control-label" >Name : <span *ngIf="!formGroup.controls['myCar'].controls['inputTextCtrl1'].valid">( required )</span> </label>
                <div class="col-xs-10">
                    <input class="form-control"
                           type="text"
                           [ngFormControl]="formGroup.controls['myCar'].controls['inputTextCtrl1']"
                    >
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label" >Color : <span *ngIf="!formGroup.controls['myCar'].controls['inputTextCtrl2'].valid">( required )</span> </label>
                <div class="col-xs-10">
                    <input class="form-control" type="text"
                           [ngFormControl]="formGroup.controls['myCar'].controls['inputTextCtrl2']"
                           >
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label" >Doors : <span *ngIf="!formGroup.controls['myCar'].controls['inputTextCtrl3'].valid">( required )</span> </label>
                <div class="col-xs-10">
                    <input class="form-control" type="text"
                           [ngFormControl]="formGroup.controls['myCar'].controls['inputTextCtrl3']"
                    >
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-2 control-label" >Vendor : <span *ngIf="!formGroup.controls['vendor'].valid">( required )</span> </label>
            <div class="col-xs-10">
                <input class="form-control" type="text"
                       [ngFormControl]="formGroup.controls['vendor']"
                >
            </div>
        </div>

    </form>
    <h3>Our Form Group Contains : </h3>
    <pre>{{controlGroupValue}}</pre>
    <h3>Validity:</h3>
    <pre>{{formGroup.valid}}</pre>
</div>

Step 3

We call our component: angular-2-controlgroup-app.component.ts

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';
import {Angular2ControlGroupExampleComponent} from "./angular-2-controlgroup-example.component";

 @Component({
    selector: 'my-app',
    template: `
                <angular-2-control-group>loading...</angular-2-control-group>
               `,
    directives: [Angular2ControlGroupExampleComponent]
})
export class Angular2ControlGroupExampleAppComponent {

}

Step 4

We bootstrap our application: main.ts

 

import {bootstrap} from 'angular2/platform/browser';
import {Angular2ControlGroupExampleAppComponent} from "./core/angular2common/ControlGroup/angular-2-controlgroup-app.component";

bootstrap(Angular2ControlGroupExampleAppComponent);

Done !