AngularJS Form Validation using ngMessages Example

Today our leading topic is add form validation with ng-messages. So you can simply use with registration form, login form, contact form etc of angular. we will use required, minlength, maxlength, email, password etc validation on form submit by button clicking in angular js example.

we will create form with name, email and password fields, make simple realtime validation using angular js. we will display instant error message. we also use bootstrap for design and make it better layout.

I write full example of angular js form validation for beginner. So, let's check bellow example code and do it.

Example:


<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Form Validation using ngMessages Example - HDTuto.com</title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
</head>
   
<body ng-app="hdTutoApp" ng-controller="HDTutoController as hdTuto">
   
  <div class="container" style="width:600px">
    <div class="page-header">
      <h3>AngularJS Form Validation using ngMessages Example - HDTuto.com</h3>
    </div>
   
    <form name="myForm" novalidate>
    
        <div class="form-group" ng-class="{ 'has-error' : 
             myForm.myName.$touched && myForm.myName.$invalid }">
            <label>Name*</label>
            <input type="text" name="myName" class="form-control"
            ng-model="hdTuto.name" ng-minlength="3" ng-maxlength="8" required>
                
            <div class="help-block" ng-messages="myForm.myName.$error" 
                 ng-if="myForm.myName.$touched">
              <p ng-message="required">Your name is required.</p>
              <p ng-message="minlength">Your name is too short.</p>
              <p ng-message="maxlength">Your name is too long.</p>
            </div>
        </div>
            
        <div class="form-group" ng-class="{ 'has-error' : 
                  myForm.userName.$touched && myForm.userName.$invalid }">
            <label>UserName(email)*</label>
            <input type="email" name="userName" class="form-control" 
                   ng-model="hdTuto.userName" required>
                        
            <div class="help-block" ng-messages="myForm.userName.$error" 
                 ng-if="myForm.userName.$touched">
                 <p ng-message="required">This field is required</p>
              <p ng-message="email">Please enter a valid email.</p>
            </div>
        </div>
              
        <div class="form-group" ng-class="{ 'has-error' : 
             myForm.password.$touched && myForm.password.$invalid }">
            <label>Password*</label>
            <input type="password" name="password" class="form-control" 
                   ng-model="hdTuto.password" ng-minlength="6" ng-maxlength="8" 
                   required>
                                  
            <div class="help-block" ng-messages="myForm.password.$error" 
                 ng-if="myForm.password.$touched">
                <p ng-message="required">This field is required</p>
                <p ng-message="minlength">This field is too short</p>
                <p ng-message="maxlength">This field is too long</p>
                <p ng-message="email">This needs to be a valid email</p>
                <p ng-message="password">This needs to be a valid password</p>
            </div>
              
        </div>
                  
        <button type="submit" class="btn btn-primary" 
              ng-disabled="myForm.$invalid">
          Submit
        </button>
    </form>
    </div>
            
<script type="text/javascript">
         
    var hdTutoApp = angular.module('hdTutoApp', ['ngMessages']);
    hdTutoApp.controller('HDTutoController', function($scope) {
    });
</script>
    
</body>
</html>

AngularJS Form Validation using ngMessages Example

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles