Reactive 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.

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:

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.