AngularJS | ng-pattern Directive - GeeksforGeeks

29 Mar, 2019
The ng-pattern Directive in AngularJS is used to add up pattern (regex pattern) validator to ngModel on 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 ngpattern attribute value.
Syntax:
<element ng-pattern="expression"> Contents... </element>
Example 1: This example uses ng-pattern Directive to check the password pattern.
<!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 style="">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:
Invalid Input:
Input doesn’t Match:
Valid Input:
Example 2: This example shows error if the input is anything other than number.
<!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 style="">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:
Input is text:
Input is number:
AngularJS-Directives
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
How to use <mat-chip-list> and <mat-chip> in Angular Material ?
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
Angular PrimeNG Dropdown Component
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?