Open In App
Related Articles

AngularJS ng-pattern Directive

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ng-Model on an input HTML element. It is used to set the pattern validation error key if input field data does not match a RegExp that is found by evaluating the Angular expression specified in the ng-pattern attribute value. 

Syntax:

<element ng-pattern="expression"> 
    Contents... 
</element>

Example 1: This example implements the ng-pattern Directive to check the password pattern. 

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-pattern Directive</title>
    <script src=
    </script>
    <style>
        .red {
            color: red
        }
  
        .green {
            color: green
        }
    </style>
</head>
  
<body ng-app="app" style="text-align:center">
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>ng-pattern Directive</h2>
  
    <div ng-controller="geek">
        <ng-form name="pass">
            Password:
            <input type="password" 
                   ng-model="password" 
                   name="password" 
                   ng-pattern="re" /><br>
            <span ng-show="pass.password.$error.pattern" 
                  style="color:red">
                Not valid password.
            </span><br>
            Confirm: 
            <input type="password" 
                   ng-model="repass" 
                   ng-keyup="compare(repass)" 
                   name="repass"
                   ng-pattern="re" /><br>
            <span ng-show="isconfirm || pass.repass.$dirty " 
                  ng-class="{true:'green',false:'red'}[isconfirm]">
                Password {{isconfirm==true?'':'not'}} match
            </span>
        </ng-form>
    </div>
  
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.re = /^[a-zA-Z]\w{3,14}$/;
  
            $scope.compare = function (repass) {
                $scope.isconfirm = $scope.password == repass ?
                    true : false;
            }
        }]);
    </script>
</body>
</html>

                    

Output: The below output illustrates an invalid Input, when the Input doesn’t Match, & the Valid Input.

 

Example 2: This example shows an error if the input is anything other than a number. 

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>ng-pattern Directive</title>
    <script src=
    </script>
</head>
  
<body ng-app="app" style="text-align:center">
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h2>ng-pattern Directive</h2>
  
    <div ng-controller="geek">
        <ng-form name="num">
            Input Number: 
            <input type="text" 
                   ng-model="number" 
                   name="number" 
                   ng-pattern="re" /><br />
            <span ng-show="num.number.$error.pattern" 
                  style="color:red">
                Input is not valid.
            </span>
        </ng-form>
    </div>
  
    <script>
        var app = angular.module("app", []);
        app.controller('geek', ['$scope', function ($scope) {
            $scope.re = /^[0-9]{1,6}$/;
        }]);
    </script>
</body>
</html>

                    

Output: From the output, when the input is the text & when the Input is a number:

 



Last Updated : 21 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads