An image

Corporate Blogs

Angular 4 Reactive Forms : Building and Validating Forms

E-Commerce Businesses Need a Mobile App

Angular 4 forms are of two types. Template driven and Reactive. In our previous article, we have discussed and worked with the form validation in Template Driven Angular Forms. Now we are going to see how to implement validation in the Reactive Forms. Reactive forms come as the best choice to build complex forms. Template driven forms are built with ng-model, we write the logic part, validation part, and controls in the template. But in the reactive forms, the logic and validation part is in the controller, i.e we define the model of the form in the component. This gives us more control over the form values and validations when compared to template-driven forms.


Reactive Forms are also known as “model-driven” forms because they use the reactive model-driven technique to handle the form data which explicitly manages the form data between component and template. It manages the form data flow between the non-UI data model and UI-oriented form model and returns the states and values of HTML form controls. And it provides reactive patterns and validation to handle forms.

Quote - Banner-Blog

Reactive forms use the form control objects to manipulate the forms. So you can create form tree using form control objects into the component and bind form controls to the component template using formControlName. So once you define the form control objects in component class it will immediately access data model and the form control structure. Then, you can push data and handle the data values. The component can observe the changes in form control state and react to those changes.


Now let us start learning Reactive Forms with the use of the same example which we have used in the previous article.


The requirements for the above form is as follows:

  1. Name: A unique name should be provided.
  2. Email: A valid email id that is unique is required.
  3. Age: Age must be a number between 18 and 85.
  4. Country: A valid country name is required.

Once we fill all the fields with valid inputs, the submit button will be enabled. On click, it will submit the form.

In the next steps, we will learn to implement the above specifications

Before we start using Reactive Forms we have to import the ReactiveFormsModule class into app.module.js like below:


And never forgot to import BrowserModule for bootstraping the application.


Now let us begin with HTML Form element which we used in our previous article. While using the Reactive Forms we shouldn’t import FormsModule (Make sure the FormsModule is not imported). For creating Reactive Form controls you must import FormGroup and FormControl in your AppComponent like below.


Each form element should be an object of FormControl.


In the above example, printSampleForm and onSubmit methods will handle the form submitted data. Here you can see we have used different classes like FormGroup, FormControl, and FormArray. All these are needed for creating the forms. First FormGroup is used to declare the Form and next FormControl is used to declare all form controls inside the FormGroup. FormArray in angular 4 is used to maintain the group of form controls.


When we are using those three classes we should concentrate on three arguments. First one is value , validators and the async validator. 



The value is different based on the objects.


FormGroup – here the value will be an object, each object element should be a FormControl.


FormArray –  the value is an array. the array of form controls.


FormControl – the value is the string value or object, it is the default value of form control.


Now we have created FormGroup but our HTML is yet uninformed about the Form object use of formGroup, formControlName, formGroupName, and formArrayName directives. For this we will assign form object to HTML form like the following:



In the reactive form we can do validation in two methods.

  1. Using Directive
  2. Using form control

Here we are going to reuse the errors.component.ts component to manage custom error message.


Using Directive:


We can reuse the custom validator that we used in our previous article. Directive validation is very easy , we just need to add particular validation directive to HTML form element like we do in template driven forms.


In the above example you can see we added directive required, email and age-validate each will validate and pass error message show-errors component to will displayed from ShowComponent.

Below directive will manage the age-validate custom validator.


The above example is implemented the Reactive Forms validation using directive now we going to learn how to define validation from the component. You can find the example in git here:


Using form control direct from Component:


Remember we have discussed three arguments which we can pass to the FormGroup, FormControl and FormArray. If yes, the second parameter of the constructor will receive validators as arguments. See below:


Above you can see that we have used classes Validators and CustomValidators to give validation. Each FormControl will accept multiple validations. for that, we just need to assign validation array forms To use those class we need to import both classes. Validators class is under ‘@angular/forms’. But for CustomValidator, we should write custom validators like below:


Above validator class will handle email and age validation return message or null based on user inputs.

Same as template driven we can handle for enabling and disabling submit button using the valid state of the form:


The onSubmit function we have written in the component will return the values with which you can save user entered data to SQL database or NoSQL database.


You can access the full form controls by using “sampleForm” and onSubmit. The value will return user entered data as JSON object. You can access specific data using DOT operator like “” with this we can collect data and manage it. You can refer the example in git here:

In the above example, we have learned about model-driven or Reactive forms and how to work with Reactive forms. It’s easy and simple since we are doing validation using “programmatic” methods. for any queries comment below. Follow Agira Technologies to know more on web development technologies. 

If you are looking for angular developers for your project ? Hire Angular developer from Agira Technologies to build best web-apps at affordable rates. Our dedicated Angular developers are well-versed with all the updates and ensure top-notch web applications development to meet your business requirements. For any queries reach us via

Professional Life of an IT Consultant Interview with Valentin Crettaz
Written by
A Passionate full stack developer with 9 years of experience in full stack web application development and expertise in technologies like PHP and Angular. He has huge craze in learning new things about technologies and constantly shares his knowledge with others.

Thoughts on Angular 4 Reactive Forms : Building and Validating Forms

Leave a Comment

You have an Idea. We have the Solution.

We help business evolve with lates technologies and infrastructures tailored to their needs and market trends.