AngularJS ng-pattern Directive

Last Updated : 21 Feb, 2023

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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js">
    </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:

AngularJS ng-pattern Directive

Vishal Chaudhary 2

Improve

Article Tags :

AngularJS ng-pattern Directive

Similar Reads

Thank You!

What kind of Experience do you want to share?