Please enable Javascript to correctly display the contents on Dot Net Tricks!

Form Validation

Posted On : 08 Feb 2015
Updated On : 10 Feb 2015
Total Views : 3718

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

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.