Simple Validation in AngularJs

One of the best feature of Angular js is the form validation.Angular validation will occur automatically and check whether a field is valid or invalid. In additon to this angular ,it will provide you some "inbuilt css" classes to highlighted the invalid fields. You can also disable the submit button of the form untill all the fields are valid.

Angular provides different objects to the form they are helping for validating the Form some are:-

1)$dirty:This will be TRUE, if the user has already interacted with the form.
2)$valid: This will be TRUE, if all containing form and controls are valid
3)$invalid: This will be TRUE, if at least one containing form and control is invalid.
4)$pristine: This will be TRUE, if the user has not interacted with the form yet
5)$error: an object hash, containing references to all invalid controls or forms, where:- 
keys are validation tokens (error names)
values are arrays of controls or forms that are invalid with given error.

There are some builtIn tokens for validation some of these are:-

• email , maxlength, pattern ,required, minlength etc. Use of "pattern" and "email" is used in given below example.

for matching any pattern use ng-pattern="/^[0-9-+ ]+$/" for entering only digits allowed from 0-9

Angular also provide the following css:-
1)ng-valid
2)ng-invalid
3)ng-dirty
4)ng-pristine

How to use them:-

For Form:-myForm.$dirty
For Field:-myForm.firldName.$dirty

In CSS:
.ng-dirty{
background-color: Red;
}

For example i have a sample form:-

 



form  name='myForm' id="myForm"  novalidate="novalidate" class="addUserForm">
<div class="col-md-12 col-xs-6 ">
<input type='text' class='form-control adminFormInputs'  name="firstName" id="firstName" placeholder="FirstName" data-ngmodel="user.firstName" data-ng-required="true"/>
 <input type='text'  class='form-control adminFormInputs' name='lastName' id='lastName' placeholder="LastName" data-ng-model="user.lastName"  data-ng-required="true"/>
 <input type='email' class='form-control adminFormInputs' name='email' id='email' placeholder="Email" data-ng-model="user.email" data-ng-    required="true"/>
<p class="col-md-12 col-xs-12 adminErrorMessages">
<span  data-ng-show="myForm.email.$error.email"> Please enter a valid email address.</span>
</p>
<input type='text' class='form-control adminFormInputs' name='designation' id='designation' placeholder="Designation" data-ng-model="user.designation" data-ng-required="true"/>
<input type='hidden' class='form-control adminFormInputs' name='companyId' id='companyId'placeholder="Email" data-ng-model="user.companyId" data-ng-init="user.companyId = buyer.id" />
<input class="form-control adminFormInputs" type="text" require ng-pattern="/^[0-9-+ ]+$/" placeholder="Phone no" id="phone" name="phone" data-ng-model="user.phone" data-ng-required="true"/>
<p class="col-md-12 col-xs-12 adminErrorMessages">
<span  data-ng-show="myForm.phone.$error.pattern"> Please enter a valid number.</span>
</p>
</div>
<div class="modal-footer buyerFooter">
<a  class=" btn btn-primary enterButton buyerButton" data-ng-disabled="myForm.email.$invalid||myForm.firstName.$invalid||myForm.lastName.$invalid||myForm.designation.$invalid||myForm.phone.$invalid" data-ng-click="addUser(myForm)">Submit</a>
</div>
</form>

And we add the following css style for this :-

.ng-invalid.ng-dirty {
border-color: red;
outline-color: red;
}
.ng-valid.ng-dirty {
border-color: green;
outline-color: green;
}

Explaining example:-

In this above example our submit button is disable until the form is valid for this we use ng-disabled and check for all fields for $invalid if one of the field is invalid true then the button is disabled and if all the field having $valid true than this submit button is also enabled.

we also check for ng-pattern and also for validating email and giving error message.

we also use the css for our form :-

ng-invalid that will check whather the input is valid or not,
we also check for ng-dirty that will check that user intracted with this field  or not.
so finally if user intract with the field and leave it blank or give some wrong input that will not match pattern then this field is highlighted with red color.

And as user give right value then it will highlighted with green color.

Hope it helps!

THANKS