Let's Develop An Angular Application - Input Validation In Template Driven Forms

Introduction

 

In this article, we will learn about Angular form validation in Template-driven forms using CSS validation classes and ngModel validation Properties.

 

Form validation is equally important as form creation. Since the user can fill any data in form controls, we should make sure that the user providing data is correct as we expected.

 

We can use HTML5 field validation attributes like required, pattern, minlength, maxlength, min, and max to validate the user providing values.

 

Here, minlength and maxlength can be used to set the minimum and maximum length of the data the user can fill in an input field.

 

Min and max can be used to set the minimum and maximum numeric value that the user can input.

 

In addition to this, we can use CSS classes for validation, we can also use ngModel properties for validation.

 

HTML5 Validators

 

Some of the HTML5 validators are explained below.

• Required – This attribute will mark the input as required. We will get an error if there is nothing entered in that field.
• Pattern – This attribute can be used to specify a regular expression
• Min length, Maxlength – This can be used to control the length of the input string that we are entering into an input field.
• Min, Max – This is used with numbers. The input type must be number and we can set the minimum value and maximum that can be accepted by the input field.

Let's use the HTML 5 validators in our Angular application.

 

HTML5 Validation Attributes in Angular Application

 

By default, Angular will disable the native browser validation. Because different browsers are using different ways to handle validation and errors. 

 

To enable the native browser validation, we need to add the ngNativeValidate directive into the form element.

 

This directive will allow the browser to validate each form of control.

 

In my previous article, I have created the template-driven form for user registration. We are going to use that form and implement the validation techniques.

 

Please read my previous article to get an overview of the angular template-driven forms

 

To read the article, click here >> Angular Template Driven Forms

 

Let us try the ‘required’ attribute first.

 

I have opened the template-driven form project that I have created for my previous article ‘Angular Template Driven Forms’

 

Then I have assigned the values of the user data model as NULL to get an empty form.

 

 

Run our application by executing the CLI command ng serve - -open in terminal 

 

The form would be looks like the below screenshot.

 

 

Then, I have added the required attribute to the name input field.

 

Please refer to the screenshot below.

 

 

Please note that I have added the ngNativeValidate directive into the form element to enable the browser validation.

 

Save the screen and click the register button without providing any value for name input.

 

The browser will give us the validation message as below screenshot.

 

 

 

Here, I am using a Chrome browser.

 

But, if open the screen in Firefox, it will handle the validation in a different way.

 

Please refer to the screenshot below.

 

 

In Firefox, the required input field appears with a red border and if we click the Register button without providing any value for name, the browser will generate the validation message.

 

That is, different browsers are using different ways to handle validation and errors. 

 

We can try the minlegth and maxlength validation properties in the name input control.

 

Open the template file and add the minlegth and maxlength values.

 

Please refer to the screenshot below.

 

 

I have set the minlength value as 2 and maxlength value as 7.

 

Save the file and check it out the result in the browser.

 

 

As we can see in the above screenshot that it will not allow us to provide the value for the name with length less than 2.

 

It will also restrict us to type name length greater than 7.

 

Let’s try the min and max attributes as well. These 2 attributes are used to limit the number type inputs.

 

I am using the same name input control to demonstrate min and max attributes.

 

For this, I have changed the input type to ‘number’.

 

Please refer to the screenshot below.

 

 

Save the file and check it out the result in the browser.

 

 

We will not be able to enter the number less than 5 and greater than 10 

 

Validation using CSS Classes

 

There are 6 CSS classes that can be used to validate the form controls.

 

They are:

• ng-untouched
• ng-touched
• ng-pristine- unmodified]
• ng-dirty-modified
• ng-valid
• ng-invalid

When we load the page, all fields are untouched state (ng-untouched class will be added to the field).

 

When we touch the field(click or focus), the ng-untouched class will be removed and ng-touched class will be added.

 

Initially, the field will contain the ng-pristine class. When we change the value, it will become ng-dirty

 

If the value of the field is valid, ng-valid will be a class name on that input. If the value is invalid, the ng-invalid class will be added.

 

Validation classes in Action

 

Let’s check how CSS validation classes are working.

 

I just added a template reference variable to my name input control.

 

Please refer to the screenshot below.

 

 

Then, we can use this reference variable to access the properties of this control

 

I have displayed the classes added to this control by using interpolation.

 

Please refer to the screenshot below.

 

 

Save the file and check the browser for the result.

 

Initially, the 3 classes will be ng-pristine, ng-invalid and ng-untouched.

 

The ng-invalid class is added because the required attribute is added to the name input field. Otherwise, it will be ng-valid

 

Please refer to the screenshot below.

 

 

Then, I have clicked inside the name input filed.

 

Then, I have moved the cursor and clicked outside the name input field, the ng-untouched class is removed and ng-touched class has been added.

 

Please refer to the screenshot below.

 

 

Next, I typed some letters inside the name input field.

 

So the ng-pristine class has been removed and ng-dirty class is added.

 

The ng-invalid class is removed and ng-valid class is added.

 

Please refer to the screenshot below

 

 

Based on the user actions, these classes will be added or removed dynamically

 

NgModel validation Properties and validation classes

 

Angular will also add validation properties to the NgModel object as well.

 

The validation classes and the NgModel properties match one for one.

 

 

 

We should make sure that the input field’s template reference variable ‘userName’ references the ngModel object.

 

To do this, simply assign the string “ngModel” to the ‘userName’ template reference variable.

 

Please refer to the screenshot below.

 

 

 

Then we can check the value of each validation property by using this template reference variable.

 

Eg: username.dirty or username.pristine etc – its value will be either true or false

 

I have added the below statements in my template file.

 

Please refer to the screenshot below.

 

 

Save the file and check the results in the browser.

 

We will get the result as below screenshot initially.

 

 

 

Now, Pristine, untouched, and Invalid is True. Dirty, touched, and valid are False.

 

Type some text in the name input field. The property values will change immediately.

 

 

 

As you can see in the above screenshot, Pristine, untouched and Invalid are False now. Dirty, touched, and valid are True.

 

We can use these CSS classes and ngModel properties to style our form.

 

Styling is important. This is because we should help our users to understand the valid and invalid inputs.

 

Styling the template using CSS validation classes and ngModel properties will explain in the next article.

 

Summary 

 

In this article, I have tried to give a short introduction about the angular form validation.

 

We have learned about CSS validation classes and ngModel validation properties to implement form validation.

 

In my next article, we will learn how to style a form using CSS validation classes and ngModel validation properties to help the user to provide the correct data.

 

Happy Learning