AngularJS Form Validations


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

AngularJS Form Validations Examples

  • Lets create project of with below structure:AngularJS Form validations
  • 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:AngularJs Form validations

Download AngularJS Code

 

One thought on “AngularJS Form Validations”
  1. 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!!

Comments are closed.