Angular 4 Template Driven Forms : Building and Validating Forms
loader image
Angular Web Development

Angular 4 Template Driven Forms : Building and Validating Forms

Nowadays all kinds of websites are using HTML Forms or Web Forms. Web Forms are used to collect the data from the user and send it to the server for processing. And web forms generally have buttons, check boxes, text inputs, and radio buttons, etc to collect different types of user data. For more check forms.

In our article, we will see how to handle forms and learn performing validations using Angular Forms API.

Angular 4 forms are two types: 1. template-driven forms 2. Reactive forms. Now you’ll learn to build an Angular form with template-driven forms and next article we can discuss reactive forms.

angular 4

Angular 4 forms use the following statuses:

  • touched or untouched – Shows the visiting state of the controls.
  • valid or invalid – Shows the controls validity.
  • pristine or dirty – Cleanness of the controls.

Let’s see the sample form:


The requirements for the above form is as follows:

Name: A unique name should be provided.

Email: A valid email id that is unique is required.

Age: Age must be a number between 18 and 85.

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.

Template-driven Forms

These are mostly same as the forms in Angular 1. It uses the models for the driven approach. So, Template Drive Forms uses the Angular directives in the template to handle the forms.

Angular has different type of modules for different type of specific actions. We must choose proper module according to our usage and should import in “AppModule”.


In the above code, we have imported the BrowserModule which provides the service for launching and running angular applications in the browser. For activating the template-driven we must import FormsModule. And most importantly we must import and declare root component “AppComponent”. You can activate the Template driven using the above code.

AppComponent (app.component.ts) should look likbelow.


The form code should be copied in the component template app.component.html.

You can notice that all the elements have “name” attribute which will be used to identify properly. FormsModule will detect a form element and ngForm automatically. To register the input elements to our ngForm we should include ngModel for all elements. This looks like below:


NgForm offers you two functionalities:

  • Retrieving all the registered controls values.
  • Retrieving the complete state of all the controls.

To attach the ngForm to Form you need to include the below code.


After attaching the ngForm you can access the form controls using 

In above HTML form, you can notice that address has a sub-group with country and city as fields. Don’t worry Angular 4 provides us “ngModelGroup” directives to separate the groups. 


So far we have ngForm with HTML form controls. Now we are going to see how to handle submit and validations. To handle a submit we have “ngSubmit”. ngSubmit will do the same thing that is done by onSubmit and with passing the form name to the ngSubmit function we can get the handler of the submitted of in component.


From the above example, you can see function “validate” method. So we must create a “validate” method in AppComponent like below:


In this way, you can access the NgForm component, when the form is submitted.

In another way, you can use @ViewChild decorator property in the component. Like:


Great, Now that we have created perfect Angular 4 Form. Now are going to assign validation for the form inputs. With this, you can access the form from component and check if the submit event was triggered or not.


Validation is used to ensure that the user enters the valid data. Validation is most important for every form in the web application to ensure whether the user is entering the valid data to work with and we should provide a meaningful and understandable message so that the user will enter the data that is valid. 

Angular 4 provides some common validations like : required, email, maxLength, minLength, etc … It is very easy to add validator for form controls just add validator directive to form controls. It look slike below:


Using the above example, now edit the form as following.


The “novalidate” in the form element will disable the default HTML5 browser validation.

Here we have to assign required validation for the name, email, age, and country inside address. We have to print the form valid status using {{validateForm.valid}}. This will print true if the form is valid.

We can write a custom helper component to modify and the show errors.


The above component shows an error if controls have error or when the input controls are touched or dirty. All messages will be listed from the messages for displaying message in the frontend. we have to add component selector element in the template for each control like the following.


As discussed before age should be between 18-85 and if the country is USA the city should be “New York”. To achieve this we need to write custom validations. This is difficult to handle in JavaScript but actually  Angular 4 offers a interface called “Validator”. With help of Validator we can write custom validations easily. Surprised yes me too. You can use the Validator as below.


While implementing “Validator” you should overwrite “validate” method. The validate method will handle input and the expected output. “validate” method will accept AbstractControl as a parameter which will accept FormGroup, FormControl and FormArray as values. And the output of the validate method can be null or undefined or ValidationErrors object if user enters invalid data.

Custom Validator for age and country



In the above code, At first we have created AgeValidatorDirective class implementing Validator interface. And we are checking whether the age is between 18 and 85 in validate method and return the different state based on age conditions. It will return null if the user data is not valid, else it will return an error message. And we have declared age-validate directive in “providers” in @Directive to act as the directive. And don’t forget to declare in AppModule. You can see how to use in inputs,


Above code will bind the custom validation to the field.


The above code will disable the “Submit” button if the user enters invalid information. Once the user enters valid information button will automatically get enabled by ngModel.


The “validate” function we have written in app.component.js 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 “validateForm” and validateForm. The value will return user enter data as JSON object. You can access specific data using DOT operator like “” with this we can collect data and manage it.


Quote - Banner-Blog


In the above example, we have learned about template-driven forms and how to work with template-driven forms. Basically, it’s very similar to the AngularJS forms so it’s very easy to integrate validation and we can integrate with minimal program changes. Here ( you can find the repo for example we discussed. In my next article, we will see about “Reactive Forms” with the same example. Follow Agira technologies to learn more about Web Development.

Happy Coding…

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

The following two tabs change content below.
Manikandan Thangaraj

Manikandan Thangaraj

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.

5 thoughts on “Angular 4 Template Driven Forms : Building and Validating Forms”

  1. Hello sir,
    Is it possible to create a service in which we can keep all validation in one place and call from component whichever service is required.If yes, then how we have to pass the parameters to service and what service should return to component pls let me know as soon as possible.
    thank you in advance

    1. No we can’t do that via Template Driven because tt uses the models for the driven approach. So, Template Drive Forms uses the Angular directives in the template to handle the forms. And we can’t handle the directives service.
      For this we can go for Reactive Form Validation ( Here you can create your custom validation and grouping validation in single CustomValidators.

Leave a Reply

Your email address will not be published. Required fields are marked *

Join our 30,000+ subscribers, never miss out anything on our latest blogs, tips, tutorials, updates & more.