AngularJS ng-pattern Directive

The AngularJS ng-pattern directive is used validate input control against specified pattern. The ng-pattern adds the pattern validator to ng-model.

Syntax

<input type="text" ng-model="model" id="input" 
name="input" ng-pattern="pattern" /><br>

AngularJS ng-pattern Directive Example

<!DOCTYPE html>      
<html>      
<head> <!-- www.techstrikers.com -->      
<title>ngPattern Test Sample</title>      
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>      
      
<script>      
  var app = angular.module('ngPatternExample', [])  
    app.controller('ngPatternController', ['$scope', function($scope) {  
      $scope.pattern = "\\w+";  
    }]);    
</script>      
</head>      
<body style="background-color:#DDE4E9;" ng-app="ngPatternExample">      
  <fieldset style="background-color:#DDE4E9;">        
    <legend>AngulerJS ngPattern Example</legend>        
<div ng-controller="ngPatternController" style="font-family:arial;"> 
  
  <form name="myform">
    <label for="regex">Default pattern (regex): </label>
    <input type="text" ng-model="pattern" id="pattern" />
    <br/><br/>
    <label for="input">This input is restricted by above pattern:     </label>
    <input type="text" ng-model="model" id="input" name="input" ng-pattern="pattern" /><br>
      dsfsf {{myform.input.$valid}}
<p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-show='!myform.input.$valid'>Special character not allowed</p>    
  </form> 
</div>  
      </fieldset>       
</body>      
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-pattern Directive

AngularJS ng-pattern Directive Example

Recent Articles