Angular Form Validations

Every web-based application that requires data from the user often requires forms to enable user to provide data.. Before we go ahead further, we need to understand about what forms are and the different types of forms supported by Angular.

Angular supports two kinds of forms

Template Driven Forms

As the name suggests, template driven forms are created by writing templates and binding directives and behavior to the templates.

Model Driven (Reactive) Forms

Reactive forms on the other hand utilize underlying APIs instead of directives.

What Is Form Validation?

Form validation is the process in which data entered by user is checked against a set of rules to ensure that it is correct and complete. In the next subsection, we will learn how to proceed with validations in template driven and reactive forms.

Validation In Template Driven Form

In template driven forms, we use html validation attributes like required. Minlength, maxlength etc. Angular recognizes these keywords and runs validation every time the form changes (as a result of user input) and generates a list of validation errors, if any, which results in INVALID status. If there are no validation errors, a null list is generated with VALID status.

Usually, ngModel is exported to a local variable so that control properties like touched, untouched, valid, invalid, pristine, dirty, etc that comes as a part of AbstractControl API can be examined.

• touched The field has been touched
• untouched The field has not been touched yet
• valid The field content is valid
• invalid The field content is not valid
• pristine The field has not been modified yet
• dirty The field has been modified

Let us consider the following example:

This is one field inside a user input form where we specify the email address. Note that we have used two attributes — required and email over here to specify that the field is required and needs to conform to the standard pattern expected for email addresses. The above div can be part of a form which binds ngSubmit to a function (say onSubmit()).

Reactive Form Validation

In reactive form validation, we add validations to control model in the component class instead of through templates. To enable this, we import Validators class in our component using:

Import {Validators} from ‘@angular/forms’;

It is possible to write our own custom validation functions or use built in validator functions to perform reactive form validation.

Let us consider an example in which we have a simple form where the user is required to enter email address and password to register to the site.

Sample form code:

Note that we have used formControls everywhere to get access to controls for each member of the form. This is an easy hack written at component level ( a small get function) so that much of the coding is reduced.

Component class would look like the following:

Built-in Vs Custom Validations

In the previous example, we use built-in validators like Required, MinLength, MaxLength etc. There are cases in which developers would want to use a custom validator when the validation logic required is a bit deviated from the common validators provided in Validator class.

Let us consider the case in which we have a new field called phone number. The numbers shall be separated using two hyphens like this: 161–202–1111 . In this case, we would need a custom validator.

The valid regex would be: -?(\d{3})(\-\d{3})(\-\d{4})

Custom validator function would look like the following:

Now, this function can be used in the reactive form in following manner:

Conclusion

In this tutorial, we learnt about form validations. Angular supports two kinds of forms — template driven and reactive forms. We saw how validations can be performed in these forms using built in and custom validations.