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
input.ng-touched.ng-invalid{
border: 1px red solid;
}
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 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!
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!