Angular2 : Reactive Forms – Part 2

FormBuilder and FormArray are used for developing complex forms by reactive model approach in Angular 2.

In complex forms usually we have dynamic grouping of controls based on business needs, For example populating the dynamic check boxes list and storing the states(checked/unchecked).

FormArray – Array of FormControl instances.

FormArray  holds the aggregated behavior, like if any child control inside FormArray is in invalid sate then FormArray instance will be invalid too.

Formbuilder– like an helper utility which we use to create instances (FormControl,                                  FormGroup) without using new keyword.

Creating a FromArray using FormBuilder.

To use FormBuilder we have to inject he FormBuilder  instance at component constructor level.

at component level:

import { FormBuilder, FormArray} from '@angular/forms';

selectedCheckboxIds: FormArray;

constructor(private fb:FormBuilder) {

   this.selectedCheckboxIds: this.fb.array([]);

}

Below some Array operations  on FormArray:

  • To add FormControl instances dynamically using push.
this.selectedCheckboxIds.push(new FormControl("abc"));
  • To check existing control/value in the FormArray using filter.
this.selectedCheckboxIds.controls.filter(c => c.value == "abc").length > 0)
  • Remove the existing control from FormArray using removeAt.
this.selectedCheckboxIds.controls.forEach((item, index) => {
       if (item == this.selectedCheckboxIds.controls.filter(c => c.value == "abc")[0])
            this.selectedCheckboxIds.removeAt(index);
});

**  We can also use splice method to remove the control element.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s