Introduction
After reading this article, we will have an overall idea of Angular forms.
Forms are an important part of angular applications. They can be used to get input from the user for our applications.
It allows us to apply the validations to make sure that the user-provided data are correct in our application
There are 2 angular form approaches available for use. They are:
- Template Driven Forms
- Reactive Forms
Reactive and template-driven forms handle the user inputs differently.
Reactive forms
A reactive form has the following advantages:
- Scalable
- Testable
- Reusable
- More robust
We can use reactive forms if the forms are in the import part of our application and we need more control over user data.
If we plan to perform unit testing in our application, we can select reactive forms.
Template Driven Forms
Template-driven forms can be useful for adding simple forms to an application. We can use this approach for creating a simple form, like a sign-in page.
Template-driven forms are simple and easy to add an application, but this approach is not as scalable as reactive forms.
We can choose this approach if our requirements and the logic are very simple.
Some of the key points about Angular template-driven forms are:
- Uses a component’s template
- Creates the form using HTML tags directly in the template
- A unit test is difficult – we need to perform a unit test against DOM. This is a slow process and different browsers may behave differently.
The differences between the template-driven approach and reactive forms are given in the below table:
States
Normally, we create forms to collect data from user. A User can enter any data they wish.
However, we need the right data. Therefore, we should validate the date before saving.
We can use some styling to indicate the wrong data or wrong format. We can also display some messages to the user t0 inform him about the data /format we want.
In addition to this, we can disable the Save button until the user enters valid data.
We can implement all this by tracking the states of the input elements and form elements.
The predefined states for input elements and form provided by Angular are listed below:
Value Changed
Join the conversation! Your thoughts help the community grow.