reactive forms or data driven approach in Angular

Hello Readers,
In this tutorial, I am talking about two approaches that angular offer. Template Driven and Data Driven (Reactive Approach).
Template Driven approach is the traditional approach which we are using with angular js 1.x and so. And even in Angular with two way binding we are using the same approach.
Data Driven or Reactive Forms Module is different than template driven approach. In Reactive approach you create a tree of Angular form object using form builder in the component class (i.e. your .ts file ) and bind them to native from control elements in the component template (i.e. your .html file). It is more or less same as what we do in asp.net MVC (Model).
One advantage of working with form control objects directly is that value and validity updates are always synchronous and under your control. You won’t encounter the timing issues that sometimes plague a template-driven form and reactive forms can be easier to unit test. (Source Courtesy Angular.io).

 

Which is Better? Template Driven or Reactive??

Neither Reactive nor Template Driven are Better over each other. They both are different approach so you can use which ever suits you the most. Even you can use both in the same application.
So in this tutorial I am talking about the following terms the most
Reactiveform Module
Form Control
FormGroup
FromBuilder
Validators
And more..
Now enough of introduction and theory let’s dive to the code.

Environment used by me to create this demo is Visual studio Code as IDE ,Angular-Cli 1.1.3.

In Order to use Reactiveformsmodule we must need to import it from @angular/forms as shown below and declare it in imports array of app.module.ts file

 

Now we will generate a new component using angular-cli,

ng g c products

products.component.html

products.component.ts

So far we had created one component and display the products from the array. Output should be as shown below

Screenshot (192).png

 

Now as product display is done we want to create a product add form using reactive form approach.

So first on our component we need to import following packages on our typescript file. i.e. products.component.ts

import { FormGroup,FormBuilder,Validators,FormControl } from ‘@angular/forms’;

Then create object of FormGroup and named it to myForm

export class ProductsComponent implements OnInit {

myForm:FormGroup;

constructor(private formbuilder:FormBuilder) { }

}

Now in ngOnInit method create the instance of myForm as shown below also define the rule for validations ,here I am using both validations inbuild validations as well as custom validations.

ngOnInit() {

this.myForm=this.formbuilder.group({

‘p_id’:[”,Validators.required],

‘pname’:[”,[Validators.required,this.exampleValidator]],

‘pprice’:[”,[Validators.required,Validators.min(0)]],

‘pimg’:[”,Validators.required],

‘soh’:[”,[Validators.required,Validators.max(10)]]

});

}

exampleValidator(control:FormControl):{[s: string]: boolean}{

if(control.value===”Example”){

return {example:true};

}

return null;

}

Here on pprice column I had used two validation one is required and other is minimum value must be positive. And in pname column I had showed demo for custom validation named as examplevalidator, In which I will through the error if the name of product = “Example”. In this way we can define inbuilt as well as custom validators in angular.

Entire  products.component.ts is as shown below.

Now on products.component.html will need to bind it properties which is created inside formbuilder object.

So on out products.component.html page most important thing is the name of the form

[formGroup]=”myForm”

Which should be same as the name of myForm:FormGroup.

formControlName=”pname” attribute in input tag will bind it to the property of formbuilder group, remember we had created it on our typescript.

Hope it will be helpful to you.

Thanks For Reading It.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s