AngularJS Tutorial – Validation 101: Beautify the Form

If you are a visual learner take a look at the video below which covers the topics outlined in the post.

In this AngularJS Tutorial I want to show you how to improve the look and, very importantly, the usability of the form. As it often happens, AngularJS provides native solutions to achieve our goals.

We will use as an example the common case of a field with length validation. Keeping the user’s attention to the issue raised from the field and clearly suggesting where the problem is and how to solve it is our duty. In order to do that, we can use some interesting CSS classes that AngularJS adds at runtime. Those classes map the states of the field; for example, the field could be in several states: it can be dirty or pristine to indicate that the user has changed or not the value of the field, touched or untouched if the user has focused the field or not.

AngularJS offers another very interesting and powerful way to conditionally apply a CSS class to a DOM object complementary to the CSS runtime classes. In fact, we can say that the CSS classes added at runtime by AngularJS are ready hooks to the DOM object; on the other side, the ng-class directive allows us to add new specific CSS classes under certain conditions.

The classes

  • ng-pristine
  • ng-dirty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid

Let’s say, for example, that we are implementing a form with some text fields, and we need to add rules to validate the user’s input. One of those rules can be the minimum length of the data, for example, set at 3 characters. Our aim is to validate the data and, in case of any issue, to notify the user of the problem. Usually, 99% of websites achieve that by highlighting the field with a red border, and we will do the same but using the CSS classes seen above (added at runtime by Angular) and defining one simple CSS rule to bind to the classes.

CSS

input.ng-touched.ng-invalid{
    border: 1px red solid;
}

As you can see in the first code fragment above, the HTML, there is an input field, but there is no footprint of the runtime classes mentioned; in order to see them, we have to inspect the code from a browser (picture below):

Focus your attention to the input tag; as you can see, it differs from the first HTML in its CSS classes: there are many more in the runtime code, and they are all new but form-control. At the moment we do not have to move the form focus to the field (i.e., we didn’t click inside the field yet), as shown by the CSS class ng-untouched, and that’s why the CSS rule that we have defined is not active at the moment. But if we click inside the input field, Angular will change the ng-untouched class to ng-touched and the CSS rule will be triggered because it is active on the tag input with the ng-touched ng-invalid class. Note that at the moment, the field is not invalid because there is a validation rule on the min length.

Before going over, it’s mandatory to review the meaning of the runtime CSS classes.

  • ng-pristine vs ng-dirty: the field has never been written vs the field has changed.
  • ng-touched vs ng-untouched: the field has never been clicked vs the field has been clicked.
  • ng-valid vs ng-invalid: the field satisfies all validation rules vs the field does not satisfy validation rules.

The directive: ng-class

AngularJS has a directive almost for all, and to apply conditionally a CSS class, we have the ng-class directive, which takes an expression as a parameter. I want to show you how to use this directive to do the same thing done above using the field's properties instead of the runtime classes.

What we have done is tell Angular to apply the has-error CSS class if the field eventName is touched ( addEventForm.eventName.$touched) AND invalid ( addEventForm.eventName.$invalid). And that’s all: in a single line of code, we have set up the style of the input field.

Thanks for arriving until the end of the post, and I hope this post helps you to solve a problem or just teaches you something new. Remember: comments and suggestions are always welcome!

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