Let's Develop an Angular Application - Angular Forms Introduction

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:

1. Template Driven Forms
2. 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

 

If the user doesn’t change the value of a control. Then the control state is ‘pristine’

 

If the user change the value of a control, then the state will be changed to ‘dirty’ from ‘pristine’

 

Similarly, if all the controls in the form are in pristine state, then the form state is also ‘pristine’

 

If any of the control is in a dirty state, the form will be dirty.

 

Validity

 

Valid and error states are used to check the validity of the control of entire form.

 

If the value of the control match with all the rules or formats, then the control state would be ‘valid’. If any of the rules or format is violated, then the control state will give an error.

 

If all the controls are in a valid state, the form state also would be valid.

 

Visited

 

If the user performs any action, like clicking or selecting a control, its touched state will be true. Otherwise, it would be in an untouched state.

 

Angular CSS Classes

 

In Angular, the states are managed by some CSS classes. They are:

• ng-pristine ,ng-dirty
• ng-valid, ng-invalid
• ng-touched, ng-untouched

This classes will be dynamically added and removed from the form controls and forms based on the user interactions

 

Please refer to the screenshot below:

 

 

If we click the text box the ng-untouched will be removed and ng-touched will added.

 

Please refer to the screenshot below:

 

 

I have added the ‘required’ validation for this input box. Therefore, we should provide some value from this control. Only then, it becomes valid.

 

If we type any value inside this text box, the ‘ng-pristine’ class is removed and ‘ng-dirty’ class will be added.

 

The ng-invalid class will also be removed and ng-valid will be added.

 

Please refer the screenshot below:

 

 

We will learn more about form validation in the coming articles:

 

Form Building Blocks

 

Angular forms have 3 important building blocks to track the states and values of the forms and their controls

 

They are:

• FormControl
• FormGroup
• FormModel

FormControl will track the value and states of an individual input element such as a text box.

 

FormGroup is used to track the value and states of a group of the form control. Form itself is considered as a form group.

 

FormModel is used as a data structure that represents the HTML form.

 

It will retain the form states,form values, and child controls.

 

Angular will automatically create the FormModel

 

These building blocks are common for both template-driven and reactive forms.

 

Summary

 

This is an introductory article about Angular forms. We learned about the Angular form's basic information, two approaches, and their differences.

 

In the next article, we will learn more about template-driven forms and their implementation.