AngularJS Tutorial – Validation 101: Beautify the Form

An AngularJS Tutorial to Beautify And to Improve Forms

  • Prevent invalid submission

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 important, the usability of the form. As it often happens AngularJS provides native solutions to achieve our goals. We will use as example the common case of a field with length validation. Keep the user’s attention to the issue raised from the filed and cleary suggest him 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 maps the states of the filed, in fact the field could be in several states: for example 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 class added runtime by AngularJS are ready hooks to the DOM object on the other side the ng-class directive allow 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 a some text fields and we are in 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 charachers. Our aim is to validate the data and, in case of any issue, to notify the user of the problem, usually the 99% of websitesite achieve that by highlighting the field with a red border and we will do the same but we will do it using the CSS classes seen above (added at run time by Angular) and defining one simple CSS rules to bind to the classes.

HTML
CSS

As you can see in the first code fragments 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):

Chrome Browser Runtime code inspectorChrome runtime inspector tool – Screenshot
Chrome runtime inspector tool – Code

Focus your attention to the input tag, as tou can see it differs from the first HTML in its CSS clsses: there are many more in the runtime code and they are all new but form-control. At the moment we do not have 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 and takes an expression as parameter. I want to show you how to use this directive to do the same thing done above using the fields properties instead of the runtime classes.

HTML

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 to have arrived until the end of the post and I hope that this post helps you to solve a problem or just teaches you something new. And remember: comment and suggestions are always welcome!


Subscribe to our newswletter to obtain an extra discount on the full price on the video tutorial
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!
Categories

About the Author:

Viaggiatore seriale e aspirante fotografo, lavoro in ambito ICT da oltre 15 anni. Collaboro con Webyourmind sin da quando era ancora solo un'idea nella testa dei fondatori. Sono appassionato di nuove tecnologie e di tutto quello che il web offre.

%d bloggers like this: