Angular Forms : Reactive

( 0 users )

Reactive forms are just opposite to what do in template driven forms. This means that instead of defining the form and its controls in the template, we define the form structure in our code.

We can say that the Reactive forms are model-driven approach in contrast to template-driven approach. We have total control on forms, controls and their validations.

Note: This chapter is strictly in continuation to previous chapter : Angular Forms : Template Driven. Please go through the previous chapter before reading this one.

Difference between template-driven and reactive forms

Template driven Form


<form>
	<input name="uname" ngModel>
	<input name="age" ngModel>
</form>
			

In template driven forms, ngForm directive is implicitly created and with ngModel its child directives are implicitly created as well. So the following classes gets instantiated implicitly.

  • FormGroup
  • FormControl 1
  • FormControl 2

Reactive Form


<form [formGroup]="form">
	<input formControName="uname">
	<input formControName="age">
</form>
			

While in Reactive forms we need to provide the Form structure in the code. We need to instantiate a form with a FormGroup class and controls with FormControl class.


form = new Form({
	uname: new FormControl(),
	age: new FormControl()
});
			

Re-implementing "Movie Booking" app in Reactive way

With this understanding, we will now implement the previously created "Movie Booking" form in Reactive way. I will be pointing out the necessary changes that needs to be done from the previous example.

Change "FormsModule" to "ReactiveFormsModule"


import { ReactiveFormsModule } from '@angular/forms';
...
...
@NgModule({
    imports: [BrowserModule, ReactiveFormsModule],
    declarations: [App],
    bootstrap: [App]
})
			

Import Anguar Forms classes

In "bookMovie.component.ts", import the following classes from @angular/forms


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

Change Form tag attributes

In "bookMovie.component.ts", change the form tag attributes as:


<form (ngSubmit)="onSubmit(bookMovieForm)" [formGroup]="bookMovieForm">
			

Note that we are referencing formGroup variable in the template as bookMovieForm, so that its child controls can be accessed.

Change input tags

In "bookMovie.component.ts", change the first input tag and its error message tag as:


<input type="text" class="form-control" formControlName="uName">
	<div class="alert alert-danger" [hidden]="bookMovieForm.controls.uName.valid">User name is required</div>
			

Note that we have removed -> ngModel data binding and required attribute as we did in template driven forms. Also, the child control model is now accessed with form's controls object : bookMovieForm.controls.uName

Now, repeat this change for other subsequent controls.

Build Form using Angular FormBuilder

In "bookMovie.component.ts", build the form using FormBuilder as follows:


constructor(private formBuilder: FormBuilder) { }

ngOnInit() {
	...
	...
	this.bookMovieForm = this.formBuilder.group({
		uName: [this.uName, Validators.required],
		name:     [this.model.name, Validators.required],
		cinemaHall: [this.model.cinemaHall , Validators.required],
		timing:    [this.model.timing, Validators.required]
	});
}
			

Here, we have injected instance of FormBuilder class and used this to instantiate form along with child controls through code.

Now we have converted our template driven app to reactive app. So these are the changes you can keep in your mind to decide whether to go for template driven forms or reactive forms in your Angular application.

Live Code

You can access the full live source code here - Angular Reactive forms

To Do

* Note : These actions will be locked once done and hence can not be reverted.

1. Track your progress [Earn 200 points]

2. Provide your ratings to this chapter [Earn 100 points]

0