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 forms

Angular provides two different ways to handling user input using forms:

1)Template-driven 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.

Reactive Template Driven
Setup More explicit, created in component class Less explicit, created by directives
Predictability Synchronous Asynchronous
Mutability Immutable Mutable
Scalability Low-level API access Abstraction on top of APIs
Data model Structured Unstructured
Form validation Functions Directives

Both reactive and template-driven forms share the following building blocks.
1) FormControl
2) FormGroup
3) FormArray
4) ControlValueAccessor

Leave comment

Your email address will not be published. Required fields are marked with *.