Form Validation

AngularJS form validation helps you to develop a modern HTML5 form that is interactive and responsive. AngularJS provides you built-in validation directives to validate form on client side. This makes your life pretty easy to handle client-side form validations without adding a lot of extra effort. AngularJS form validation are based on the HTML5 form validators.

AngularJS directives for form validation

Here is a list of angularjs directive which can be apply on a input field to validate it's value.

<input type="text"
 ng-model="{ string }"
 [name="{ string }"]
 [ng-required="{ boolean }"]
 [ng-minlength="{ number }"]
 [ng-maxlength="{ number }"]
 [ng-pattern="{ string }"]
 [ng-change="{ string }"]>
</input>

The main advantage of using AngularJS form validation instead of HTML5 attributes based validation, is that AngularJS way allows to mantain the two way data binding between model and view.

Angular Form Properties

Angular provides properties on form which help you to get information about a form or it's inputs and to validate them.

1. $valid

   It is a boolean property that tells whether the form or it's inputs are valid or not. If all containing form and controls are valid, then it will be true, otherwise it will be false.

   Syntax

   formName.$valid
   formName.inputFieldName.$valid
   

2. $invalid

   It is a boolean property that tells whether the form or it's inputs are invalid or not. If at least one containing form and control is invalid then it will be true, otherwise it will be false.

   Syntax

   formName.$invalid
   formName.inputFieldName.$invalid
   

3. $pristine

   It is a boolean property that tells whether the form or it's inputs are unmodified by the user or not. If the form or it's inputs are unmodified by the user, then it will be true, otherwise it will be false.

   Syntax

   formName.inputFieldName.$pristine
   

4. $dirty

   It is a boolean property that is actually just reverse of pristine i.e. it tells whether the form or it's inputs are modified by the user or not. If the form or it's inputs are modified by the user, then it will be true, otherwise it will be false.

   Syntax

   formName.$dirty
   formName.inputFieldName.$dirty
   

5. $error

   This is an object hash which contains references to all invalid controls or forms. It has all errors as keys: where keys are validation tokens (such as required, url or email) and values are arrays of controls or forms that are invalid with given error. For a control, If a validation fails then it will be true, otherwise it will be false.

   Syntax

   formName.$error
   formName.inputFieldName.$error
   

AngularJS Form Validation with Bootstrap

What do you think?

I hope it will help you to understand AngularJS form validation. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.