AngularJS Tutorial – Validation 101: – Form Validation

If you are a visual learner check out the videos below

In this AngularJS Article we will introduce the built-in Angular form validation and in particular we will focus on state properties of forms and fields.

Creating a robust validation system can be frustrating, boring and very dangerous if not done the right way. Every UX developer knows that the typical user fills forms without paying attention.
For example, a user might insert dates in wrong format or alphanumeric characters in a numeric field and so on; that’s why AngularJS provides an easy way to validate data as well as driving the user in filling in form data; in these series of articles I’m going to show you some very useful techniques to validate forms.

That said, what AngularJS can do for us? It provides a full set of tool to validate data and in this post we will talk about form and fields properties that represents the state of those objects.

First of all, in order to activate the angular validation we have to disable the native HTML validation by adding the novalidate attribute to the form tag.

The

tag in AngularJS is a directive itself so when we give the form a name a new scope object is created and all fields are accessible through this object.
Keep this concept in mind because we will track the form properties using the scope object.Angular add runtime some properties to the form that represents the state of the form and its fields:

$pristine
$dirty
$valid
$invalid
$submitted
$touched
$untouched

Let’s see together the meaning of each of these properties: $pristine is set to true if the form and its fields are not yet touched, i.e. the user haven’t input any data; $dirty is the opposite of $pristine and is true when the user has filled at least one filed.

As you can guess the $valid property tells us that all fields are valid and there are no validation issue. $invalid, on the contrary, indicates that one or more fields contain errors. Both these last two properties are boolean values.

The following code is an extract from an HTML file:

In the example above you can see, on the first line, the use of the $valid property to enable or not the submit action: the $valid property belongs to the addEvent object that is the form. On line 7 you can see the use of $dirty and $invalid in the ng-show directive (in this case are used to show or hide a block of HTML), note that the $invalid property belongs to the filed eventName of the addEventForm form.

$submitted property is set to true when the form had been submitted otherwise it is false.

The last two properties are $touched and $untouched. They refers to form’s fields: the $touched property is true when the user moves the focus on one field, the $untouched is true when the user have not moved the focus on the field. In other words if the user clicks onto a field, the property $touched become true and the $untouched become false.

In this post we scratched only the surface of forms validation in Angular, stay tuned for more tutorials and tricks: another post will come soon.

This post is taken from our complete course AngularJS for the Real World – Learn by creating a WebApp. Take a look and give us a feedback!

AngularJS Tutorial – Validation 101: – Form Validation

SHARE IT!