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.
Table of Contents
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
- Angular Forms Tutorial: Fundamental & Concepts (This article)
- Template Driven Forms in Angular
- Set Value in Template Driven forms in Angular
- Reactive Forms in Angular
- FormBuilder in Reactive Forms
- SetValue & PatchValue in Angular
- StatusChanges in Angular Forms
- ValueChanges in Angular Forms
- FormControl
- FormGroup
- FormArray Example
- Build Dynamic or Nested Forms using FormArray
- Validations in Reactive Forms in Angular
- Custom Validator in Reactive Forms
- Passing Parameter to Custom Validator in Reactive Forms
- Inject Service into Custom Validator
- Validation in Template Driven Forms
- 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.
Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular
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
1 2 3 | First Name : <input type="text" name="firstname" /> |
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
1 2 3 | let firstname= new FormControl(); //Creating a FormControl in a Reactive forms |
Then, you can retrieve the current value in the input field using the value property
1 2 3 | firstname.value //Returns the value of the first name field |
You can check the validation status of the First Name element as shown below
1 2 3 4 5 6 | firstname.errors // returns the list of errors firstname.dirty // true if the value has changed (dirty) firstname.touched // true if input field is touched firstname.valid // true if the input value has passed all the validation |
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.
1 2 3 4 5 | city : <input type="text" name="city" > Street : <input type="text" name="street" > PinCode : <input type="text" name="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
1 2 3 4 5 6 7 | let address= new FormGroup({ street : new FormControl(""), city : new FormControl(""), pinCode : new FormControl("") }) |
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
1 2 3 | address.value |
The Return value
1 2 3 4 5 6 7 | address { street :"", city:"", Pincode:"" } |
You can access child control as
1 2 3 | address.get("street") |
Check the Validation status as follows
1 2 3 4 5 6 | address.errors // returns the list of errors address.dirty // true if the value of one of the child control has changed (dirty) address.touched // true if one of the child control is touched address.valid // true if all the child controls passed the validation |
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
1 2 3 4 5 6 7 8 9 | contactForm = new FormGroup( { name: new FormControl(''), cities:new FormArray([ new FormControl('Mumbai'), new FormControl('Delhi') ]) }); |
You can get the reference to the cities
from the contactForm.get
method
1 2 3 4 5 | cities() :FormArray { return this.contactForm.get("cities") as FormArray } |
Check the Validation status as follows
1 2 3 4 5 6 | cities.errors // returns the list of errors cities.dirty // true if the value of one of the child control has changed (dirty) cities.touched // true if one of the child control is touched cities.valid // true if all the child controls passed the validation |
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
- Angular Forms Tutorial: Fundamental & Concepts (This article)
- Template Driven Forms in Angular
- Set Value in Template Driven forms in Angular
- Reactive Forms in Angular
- FormBuilder in Reactive Forms
- SetValue & PatchValue in Angular
- StatusChanges in Angular Forms
- ValueChanges in Angular Forms
- FormControl
- FormGroup
- FormArray Example
- Build Dynamic or Nested Forms using FormArray
- Validations in Reactive Forms in Angular
- Custom Validator in Reactive Forms
- Passing Parameter to Custom Validator in Reactive Forms
- Inject Service into Custom Validator
- Validation in Template Driven Forms
- Custom Validator in Template Driven Forms
Bhupender Jogi
I’m learning angular from its official website but in some topic its quite difficult to understand but this website is very helpful to understand easily.!
Simple & straight forward….
Thanks All
really helpful, thank you!
Magnificent. Simply stunning. This represents everything good and pure and so fine OH MY GOD this is all i need in life. So, so great. Thank you and god bless and long live the queen. Amen
You are so right. I do feel exactly the same and i am thankful for this and it is a privilege to be able to learn this much for free. Thank you. Amen
when I started learning angular from the official website….there were i am so confused ….But this website is really helful
Excellent content presented! this helps an Angular beginner to explore and understand every concept in deep. Great Work! Thank you so much.
I SUGGEST YOU TO START FOR JAVA…add JAVA, J2ee …..
Great
need example with code for complete form.
ok
very nice site for begineer
Finally, found great website for angular beginners. Simple, clear and precise explanation.
wonderful tutorial series. I really like it and suggested to my friends.
I look at it through your advice, content is straight-forward. Thanks a lot.
I started using this tutorials two yesterday and i feel they are really helpful.
Thanks