How to Validate a Phone Number in AngularJS

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <title>angularjs Validation of a phone Number</title>  
  5.     <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>  
  6.     <style>  
  7.         .error {  
  8.             color: red;  
  9.         }  
  10.     </style>  
  11.     <script>  
  12.         var app = angular.module('myApp', []);  
  13.   
  14.         app.controller('mainCtrl', function ($scope) {  
  15.             $scope.phoneNumbr = /^\+?\d{2}[- ]?\d{3}[- ]?\d{5}$/;  
  16.         });  
  17.     </script>  
  18. </head>  
  19. <body ng-app="myApp">  
  20.     <ng-form name="myForm" ng-controller="mainCtrl">  
  21.         <div><b>Enter your Phone No. in the format of (91-xxx-xxxxx) :</b></div>  
  22.         <div><b>Example of a valid Phone no is :91-999-99999</b></div>  
  23.         <div>  
  24.             <input type="text" placeholder="+91-xxx-xxxxx" name="phone" ng-pattern="phoneNumbr" ng-model="phone" />  
  25.             <br><span class="error" ng-show="myForm.phone.$error.pattern">Please Enter the Phone no matching  pattern [+91-xxx-xxxxx || 91-xxx-xxxxx]</span>  
  26.         </div>  
  27.     </ng-form>  
  28. </body>  
  29. </html>