LearnKode

8 Example(s) of Ng-Pattern


Description :

It sets pattern validation key if input field data does not match a RegularExpression that is bind to ng-pattern(re).


Ng-Pattern Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="mailForm">
            Email: <input type="text" ng-model="mail" name="mail" ng-pattern="re" /><br />
            <span ng-show="mailForm.mail.$error.pattern" style="color:red">Please enter correct email address.</span>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mail = "[email protected]";
        $scope.re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

It sets pattern validation key if input field data does not match a RegularExpression that is bind to ng-pattern(re).In this correct form of mobile number show in placeholder.


Ng-Pattern Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="mobileForm">
            Mobile:
            <input type="text" ng-model="mobile" name="mobile" placeholder="+91-9855514371" ng-pattern="re" />
            <br />
            <span ng-show="mobileForm.mobile.$error.pattern"  style="color:red">Mobile number should be in valid formate.</span>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.re = /^(\+\91{1,2}[- ])\d{10}$/;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

It sets the pattern validation key if input field data does not match a RegularExpression that is bind to ng-pattern directive(re).


Ng-Pattern Example - 3 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="landLineForm">
            Land Line #: <input type="text" ng-model="landLine" name="landLine"  ng-pattern="re" />
            <br />
            <span ng-show="landLineForm.landLine.$error.pattern" style="color:red">Please enter valid Land Line number.</span>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.re = /^[0-9]\d{2,5}-\d{6,8}$/;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

It sets the pattern validation key if first textbox data does not match a RegularExpression and in second textbox it will call the compare(repassword) function on keyup event that will compare the password.


Ng-Pattern Example - 4 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .red{
            color:red
        }
          .green{
            color:green
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="passwordForm">
            Password:
            <input type="password" ng-model="password" name="password" ng-pattern="re" />
            <br />
            <span ng-show="passwordForm.password.$error.pattern" style="color:red">Not valid password.</span>
            <br />
            Confirm:
            <input type="password" ng-model="repassword" ng-keyup="compare(repassword)" name="repassword" ng-pattern="re" />
            <br />
            <span ng-show="isconfirm || passwordForm.repassword.$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('controllerName', ['$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>
Try it » Download Example »

Output

Description :

In this we should only write digits not more than 6 but between 0-9 in textbox otherwise it will give error.


Ng-Pattern Example - 5 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="numberForm">
            Number Only:<input type="text" ng-model="number" name="number" ng-pattern="re" /><br />
            <span ng-show="numberForm.number.$error.pattern" style="color:red">Enter only number.</span>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.re = /^[0-9]{1,6}$/;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this we should only write alphabets between a-z,A-Z in textbox otherwise it give error.


Ng-Pattern Example - 6 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <ng-form name="stringForm">
            String Only: <input type="text" ng-model="number" name="number" ng-pattern="RE" /><br />
            <span ng-show="stringForm.number.$error.pattern" style="color:red">Enter only string.</span>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.RE = /^[a-zA-Z ]{1,25}$/;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

In this example of Ng-Pattern, We will use this to validate the input value. As we will have textbox for age where we want only two digit numbers so added regex variable in score and html likeSee the code


Ng-Pattern Example - 7 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <h2>Enter age between 1 to 2 digits only</h2>
        <ng-form name="myForm">
            Age :
            <input type="text" ng-model="age" name="age" ng-pattern="regEx" />
            <br />
            <span ng-show="myForm.age.$error.pattern" style="color:red">Invalid Age.</span>
        </ng-form>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.regEx = /^[0-9]{1,2}$/;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Account detail validation using ng-pattern. app.controller('myController', ['$scope', function ($scope) { $scope.cardRegEx = /^[0-9]{16,16}$/; $scope.cvvRegEx = /^[0-9]{3,3}$/; }]); See the code ATM Card Number (16 digits):Invalid Card Number.

CVV (3 digits):Invalid CVV.


Ng-Pattern Example - 8 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="myController">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-3 col-md-6">
                    <h2>Debit Card Detail</h2>
                    <ng-form name="myForm">
                        Name On Card :
                        <input type="text" class="form-control" ng-model="name" name="name" />
                        <br />
                        ATM Card Number <span><i>(16 digits)</i></span>:
                        <input type="text" class="form-control" ng-model="cardNumber" name="cardNumber" ng-pattern="cardRegEx" />
                        <span ng-show="myForm.cardNumber.$error.pattern" style="color:red">Invalid Card Number.</span>
                        <br />
                        CVV <span><i>(3 digits)</i></span>:
                        <input type="text" class="form-control" ng-model="cvv" name="cvv" ng-pattern="cvvRegEx" />
                        <span ng-show="myForm.cvv.$error.pattern" style="color:red">Invalid CVV.</span>
                    </ng-form>
                </div>
            </div>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.cardRegEx = /^[0-9]{16,16}$/;
        $scope.cvvRegEx = /^[0-9]{3,3}$/;
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output