When taking input from our users, it’s important to show visual feedback on their input. In the context of human relationships, form validation is just as much about giving feedback as well as getting the “right” input.
Not only does it provide positive feedback for our user, it will also semi-protect our web app from bad or invalid input. We can only protect our back end as much as is possible with our web front end.

There are many form validation directives available in AngularJS. We’ll talk about a few of the core validations, then we’ll get into how to build your own validations.

Capture.PNG

To use form validations, we first must ensure that the form has a name associated with it, like in the above example.

All input fields can validate against some basic validations, like minimum length, maximum length, etc. These are all available on the new HTML5 attributes of a form.

It is usually a great idea to use the novalidate flag on the form element, as it prevents the browser from natively validating the form.
Let’s look at all the validation options we have that we can place on an input field:

  • Required
    To validate that a form input has been filled out, we simply add the HTML5 tag, required, to the input field:
    <input type=”text” required />
  • Minimum Length
    To validate that a form input input is at least a certain {number} of characters, we add the AngularJS directive ng-minlength=”{number}” to the input field:
    <input type=”text” ng-minlength=5 />
  • Maximum Length
    To validate that a form input is equal to or less than a number of characters, we can add the AngularJS directive ng-maxlength=”{number}”:
    <input type=”text” ng-maxlength=20 />
  • Matches a Pattern
    To ensure that an input matches a regex, we can use ng-pattern=”/PATTERN/”:
    <input type=”text” ng-pattern=”/a-zA-Z/” />
  • Email
    To validate an email address in an input field, we simply set the input type to email, like so: <input type=”email” name=”email” ng-model=”user.email” />
  • Number
    To validate an input field has a number, we set the input type to number:
    <input type=”number” name=”age” ng-model=”user.age” />
  • URL
    To validate that an input represents a URL, set the input type to url:
    <input type=”url” name=”homepage” ng-model=”user.facebook_url” />


Control Variables in Forms

AngularJS makes properties available on the containing $scope object available to us as a result of setting a form inside the DOM. These properties enable us to react to the form in real time (just like everything else in AngularJS). The properties that are available to us are: (Note that these properties are made available to us in the format:)
formName.inputFieldName.property

Unmodified Form
This property is a boolean that tells us whether the user has modified the form. It is true if the user hasn’t touched the form, and false if they have:
formName.inputFieldName.$pristine;

Modified Form
This property is a boolean that tells us if and only if the user has actually modified the form. It is set regardless of validations on the form:
formName.inputFieldName.$dirty

Valid Form
This property is a boolean that tells us whether or not the form is valid. If the form is currently valid, then the following will be true:
formName.inputFieldName.$valid

Invalid Form
This property is a boolean that tells us whether or not the form is invalid. If the form is currently invalid, then the following will be true:
formName.inputFieldName.$invalid

The last two properties are particularly useful for showing or hiding DOM elements. They are also very useful when setting a class on a particular form.

Errors
This property is another useful one that AngularJS makes available to us: the $error object. This object contains all of the validations on a particular form and a record of whether they are valid or invalid. To get access to this property, use the following syntax: formName.inputfieldName.$error
If a validation fails, then this property will be true; if it is false, then the value has passed the input field.


A Little Style Never Hurts

When AngularJS is handling a form, it adds specific classes to the form based upon the current state of the form (i.e. if it’s currently valid, unchanged, etc.). These classes are named similarly to the properties that we can check, as well.
These classes are:
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}

They correspond to their counterpart on the particular input field.
When a field is invalid, the .ng-invalid class will be applied to the field. This particular site sets the CSS class as:
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}

Here is an example from my Plunker

Advertisements