AngularJS Form Validations
AngularJS form validations tutorial focus on applying validations on form elements before submitting it. We used below JS files and versions
JS Files and Versions:
- angular.min.js – 1.6.2
- bootstrap.css
- angular-routing.js
- bootstrap.js
- jQuery.js
Form Modal CSS classes:
ngModel adds the below class for each input element:
- ng-valid: the model is valid
- ng-invalid: the model is invalid
- ng-pristine: the control hasn’t been interacted with yet
- ng-dirty: the control has been interacted with
- ng-touched: the control has been blurred
- ng-untouched: the control hasn’t been blurred
- ng-valid-[key]: for each valid key added by $setValidity
- ng-pending: any $asyncValidators are unfulfilled
In this tutorial, we will
- Lets create project of with below structure:
- createEmployee.html
- novalidate will suppress native browser validations
- ng-submit=”submitEmployee(empForm)” will call the method defined in MailController
- We will check the validation on form.submitted or input field is touched
- we display error message if it is empty: empForm.firstName.$error.required
-
<div class="container-fluid"> <style type="text/css"> .error-mesg{ color:#f38888; } </style> <div class="employee-create"> <h2 style="color:#f38888;text-align:center">Add Employee</h2> <form name="empForm" novalidate ng-submit="submitEmployee(empForm)"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class ="col-sm-offset-1 col-xs-6"> <div class="form-group"> <label class="control-label" style="color: #0515B5">First Name: <span style="color:red;">*</span></label> <input type="text" class="form-control" name="firstName" ng-model="employee.firstName" required placeholder="First Name" /> <div ng-show="empForm.$submitted || empForm.firstName.$touched"> <p class="error-mesg" ng-show="empForm.firstName.$error.required">First Name is required</p> </div> </div> </div> </div> <div class="row"> <div class = "col-sm-offset-1 col-xs-6"> <div class="form-group" > <label class="control-label" style="color: #0515B5">Last Name: <span style="color:red;">*</span></label> <input type="text" class="form-control" name="lastName" ng-model="employee.lastName" required placeholder="Last Name" /> <div ng-show="empForm.$submitted || empForm.lastName.$touched"> <p class="error-mesg" ng-show="empForm.lastName.$error.required">The Last Name is required</p> </div> </div> </div> </div> <div class="row"> <div class = "col-sm-offset-1 col-xs-6"> <div class="form-group" > <label class="control-label" style="color: #0515B5">Employee ID: <span style="color:red;">*</span></label> <input type="text" class="form-control" name="empId" ng-model="employee.empId" required placeholder="Enter EmpId" /> <div ng-show="empForm.$submitted || empForm.empId.$touched"> <p class="error-mesg" ng-show="empForm.empId.$error.required">EmployeeId is required</p> </div> </div> </div> </div> <div class="row"> <div class = "col-sm-offset-1 col-xs-6"> <div class="form-group" > <label class="control-label" style="color: #0515B5">Email: <span style="color:red;">*</span></label> <input type="text" class="form-control" name="email" ng-model="employee.email" required placeholder="Email" /> <div ng-show="empForm.$submitted || empForm.email.$touched"> <p class="error-mesg" ng-show="empForm.email.$error.required">Email is required</p> </div> </div> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class = "col-sm-offset-1 col-xs-6"> <div class="form-group" > <label class="control-label" style="color: #0515B5">Designation: <span style="color:red;">*</span></label> <input type="text" class="form-control" name="designation" ng-model="employee.designation" required placeholder="designation" /> <div ng-show="empForm.$submitted || empForm.designation.$touched"> <p class="error-mesg" ng-show="empForm.designation.$error.required">Designation is required</p> </div> </div> </div> </div> <div class="row"> <div class = "col-sm-offset-1 col-xs-6"> <div class="form-group"> <label class="control-label" style="color: #0515B5">Project Allocation: <span style="color:red;">*</span></label> <select name="project" ng-model="employee.project" required="true"> <option>Project1</option> <option>Project2</option> <option>Project3</option> </select> <div ng-show="empForm.$submitted || empForm.project.$touched"> <p class="error-mesg" ng-show="empForm.project.$error.required">Program is Required</p> </div> </div> </div> </div> </div> </div> <div class="createSubmit" style="text-align:center" > <input type="submit" value="Submit" class="btn btn-primary" /> </div> <div style="clear:both;"></div> </form> </div> <br/> </div>
- app.js is:
Download AngularJS Code
One thought on “AngularJS Form Validations”
Comments are closed.
Thanks a lot…
I have searched many sites for examples you are the only one to have a clear one..
Please give more examples..thanks again!!