AngularJS ng-pattern Directive Last Updated : 11 Jul, 2025 Comments Improve Suggest changes Like Article Like 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= "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: Comment More infoAdvertise with us Next Article AngularJS ng-open Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads AngularJS ng-open Directive The ng-open Directive in AngularJS is used to specify the open attribute of the specified HTML element. If the expression inside the ng-open directive returns true then the details will be shown otherwise they will be hidden. Syntax: <element ng-open="expression"> Contents... <element> P 1 min read AngularJS ng-style Directive The ng-style Directive in AngularJS is used to apply custom CSS styles on an HTML element. The expression inside the ng-style directive must be an object. It is supported by all the HTML elements. Syntax: <element ng-style="expression"> Content ... </element>Parameter: expression: It rep 2 min read AngularJS ng-value Directive The ng-value Directive in AngularJS is used to specify the value of an input element. This directive can be used to achieve the one-way binding for the given expression to an input element, especially when the ng-model directive is not used for that specific element. It is supported by <input> 2 min read AngularJS ng-src Directive The ng-src Directive in AngularJS is used to specify the src attribute of an <img> element, ie., it overrides the original src attribute for an <img> element. This attribute must be used if we have the Angular code inside of the src element. It ensures that the wrong image is not produce 2 min read AngularJS input Directive In this article, we will see how the input Directive in AngularJS can be utilized to change the default behavior of <input> elements. This can be done with the help of the ng-model attribute present inside the <input> element. <input> is an HTML tag that is used to get user data us 2 min read AngularJS ng-bind-template Directive The ng-bind-template Directive in AngularJS is used to replace the content of an HTML element with the value of the given expression. It is used to bind more than one expression. It can have multiple {{ }} expressions. It is supported by all HTML elements. Syntax: The ng-bind-template Directive can 2 min read Like