Angular Forms Tutorial: Fundamentals & Concepts

The Angular forms are used to collect the data from the user. In this Angular Forms tutorial series, we look at what is Angular Forms are and in the subsequent tutorials, we will see how to use Angular Forms with sample examples.

Angular Forms Tutorial

The data entry forms can be very simple to very complex. It can contain large no of input fields, Spanning multiple tabs. Forms may also contain complex validation logic interdependent on multiple fields.

Some things forms are expected to do

• Initialize the forms fields and present it to the user
• Capture the data from the user
• Track changes made to the fields
• Validate the inputs
• Display helpful errors to the user

Link to all article on Angular Forms

1. Angular Forms Tutorial: Fundamental & Concepts (This article)
2. Template Driven Forms in Angular
3. Set Value in Template Driven forms in Angular
4. Reactive Forms in Angular
5. FormBuilder in Reactive Forms
6. SetValue & PatchValue in Angular
7. StatusChanges in Angular Forms
8. ValueChanges in Angular Forms
9. FormControl
10. FormGroup
11. FormArray Example
12. Build Dynamic or Nested Forms using FormArray
13. Validations in Reactive Forms in Angular
14. Custom Validator in Reactive Forms
15. Passing Parameter to Custom Validator in Reactive Forms
16. Inject Service into Custom Validator
17. Validation in Template Driven Forms
18. Custom Validator in Template Driven Forms

Angular Forms Module

Angular forms module provides all the above services out of the box. It binds the form field to the Angular component class. It tracks changes made to the form fields so that we can respond accordingly. The Angular forms provide the built-in validators to validate the inputs. You can create your own custom validator. It presents the validation errors to the user. Finally, it encapsulates all the input fields into an object structure when the user submits the form.

Angular takes two approaches to build the forms. One is Template-driven forms approach and another one is Reactive forms or model-driven forms approach

Template-driven forms approach

In Template-driven approach is the easiest way to build the Angular forms. The logic of the form is placed in the template. The approach here is similar to what we did in AngularJs.

Model-driven forms approach

In Reactive Forms or Model-driven approach, the logic of the form is defined in the component as an object. The Model-driven approach has more benefits as it makes the testing of the component easier.

In this approach, the representation of the form is created in the component class. This form model is then bound to the HTML elements. it is done using the special markups.

Template-driven forms in Angular allows us to create sophisticated looking forms easily without writing any javascript code. The model-driven forms are created in component class, where Form fields are created as properties of our component class.  This makes it easier to test.

Here is the list of tutorials on how to build a form using the template-driven approach & reactive or model-driven approach

Building Blocks of Angular Forms

The Angular Forms module consists of three Building blocks, irrespective of whether you are using Template-driven or Reactive forms approach.

FormControl

A FormControl represents a single input field in an Angular form.

Consider a simple Text input box

As a developer, you would like to know the current value in the Text box. You would also be like to know if the value is valid or not. If the user has changed the value(dirty) or is it unchanged. You would like to be notified when the user changes value.

The FormControl is an object that encapsulates all this information related to the single input element. It Tracks the value and validation status of each of these control

The FormControl is just a class. A FormControl is created for each form field. We can refer them in our component class and inspect its properties and methods

You can use FormControl to set the value of the Form field, find the status of form field like (valid/invalid, pristine/dirty, touched/untouched ) etc & add validation rules to it.

The above input field is created using the FormControl as shown below

Then, you can retrieve the current value in the input field using the value property

You can check the validation status of the First Name element as shown below

FormGroup

FormGroup is a collection of FormControls . Each FormControl is a property in a FormGroup. with the control name as the key.

Often forms have more than one field. It is helpful to have a simple way to manage the Form controls together.

Consider the following Form. we have three input fields street, city & Pincode.

All of the above input fields are represented as the separate FormControl. If we wanted to check the validity of our form, we have to check the validity of each and every FormControl for validity. Imagine Form having large no of fields. It is cumbersome to loop over large no of FormControls and check for validity.

FormGroup solve’s this issue by providing a wrapper interface around a collection of FormControls A FormGroup tracks the status of each child FormControl and aggregates the values into one object. with each control name as the key

We can group these input fields under the group address as shown below

In the above example, the address is our FormGroup, consisting of 3 Form Controls city, street, and Pincode. Now we can check the validity of the entire group together. For example, if the state is invalid, then the address FormGroup returns the invalid state.

You can read the value of an address using the value method, which returns the JSON object as shown below

The Return value

You can access child control as

Check the Validation status as follows

A typical Angular Form can have more than one FormGroup. A FormGroup can also contain another FormGroup.

The Angular form is itself a FormGroup

FormArray

FormArray is an array of form controls. It is similar to FormGroup except for one difference. In FormGroup each FormControl is a property with the control name as the key. In FormArray is an array of form controls.

We define the FormArray as shown below

You can get the reference to the cities from the contactForm.get method

Check the Validation status as follows

Summary

In this tutorial, we learned what is Angular Forms all about. We looked at the basic building blocks of Angular Forms i.e. FormGroup, FormControl & FormArray. The Angular allows us to build Forms using two different approaches. One is Template Driven & another one is Reactive Forms or Model-driven. In the next few tutorials, we look at how to build Angular Forms using both of these options.

You can look at all the Angular Forms related from the Following Link

1. Angular Forms Tutorial: Fundamental & Concepts (This article)
2. Template Driven Forms in Angular
3. Set Value in Template Driven forms in Angular
4. Reactive Forms in Angular
5. FormBuilder in Reactive Forms
6. SetValue & PatchValue in Angular
7. StatusChanges in Angular Forms
8. ValueChanges in Angular Forms
9. FormControl
10. FormGroup
11. FormArray Example
12. Build Dynamic or Nested Forms using FormArray
13. Validations in Reactive Forms in Angular
14. Custom Validator in Reactive Forms
15. Passing Parameter to Custom Validator in Reactive Forms
16. Inject Service into Custom Validator
17. Validation in Template Driven Forms
18. Custom Validator in Template Driven Forms