Reactive form in angular 4, angular 6
Applications use forms to handle user inputs, It enables users to users to log in, to register,
to update a profile, to enter sensitive information, and to perform many other data-entry related tasks.
So how form works in angular is an essential skill, In this tutorial we are going to take a close look at the ways to create, and to handle forms in angular.
Angular provides two different ways to handling user input using forms:
2) Reactive forms
Both forms capture user input events from the view. Both forms validate the user input, create a form model and data model to update. and provide a way to track changes.
But they process and manage the data differently.
Template driven forms : The Template driven forms are easy to add, these forms are generally used for adding a simple form to a web app , such as an newsletter signup form.It is somewhere difficult to scale the form like reactive form.
In template driven forms we create the html inputs and then use the directives like ngModel to bind the inputs with variable. I did many times this way
Reactive forms : Unlike Template-driven forms, reactive form are very scalable, reusable and testable. In Reactive form we define the form in the code instead of defining the form in our html template.
The below table describes the difference between the two types of angular form, which will help you to decide which form you will use in which situation.
|Setup||More explicit, created in component class||Less explicit, created by directives|
|Scalability||Low-level API access||Abstraction on top of APIs|
Both reactive and template-driven forms share the following building blocks.