PU$]-[KAR's

… Every drop has ability to survive .

Change ‘ng-pattern’ dynamically in AngularJS

4 Comments

Hey,

In AngularJS ng-pattern is widely used for validation and ‘Regular Expression’ is passed to attribute ‘ng-pattern’ as value. Its one of the cool feature which makes developers life easy to apply validation bsed on the regex i.e.regular expression.
So, I would like to share one example which change validation at run-time dynamically. The key thing is to set value for ng-pattern dynamically.

Prior to that we should have some basic knowledge about $viewValue.

$viewValue: $viewValue is the variable exposed by controller to handle validations or to filter results based on the value of it.

$setViewValue: This function should be called if $viewValue has been changed grammatically.This method updates value of $viewValue even including parsing that value and validating it against regular expression provided in ng-pattern.

Following code snippet will illustrate example:

HTML:

<button class="btn btn-warning cancel" ng-click="switchToNumericValidation()">Validation to Numeric</button>
<button class="btn btn-warning cancel" ng-click="switchToAlphaNumericValidation()">Validation to Alpha Numeric</button>
<input class="my-input" apply-validation type="text" ng-model="price" ng-pattern="validateTextbox()">

Directive:

angular.module('demo', [])
.directive('applyValidation', function () {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, elm, attrs, formCtrl) {
scope.$watch('regex', function (value) {
if (formCtrl.$viewValue !== '') {
formCtrl.$setViewValue(formCtrl.$viewValue);
}});}};})

Here if you see, we have created a directive ‘applyValidation’ n applied to ‘input’ control.This directive is responsible to get value from ‘$viewValue’ & validate it against current (selected) ng-pattern.
ng-pattern will get value run time from function ‘validateTextbox()’ bound to it as shown in below.

$scope.validateTextbox = function () {
return $scope.regex;
};

$scope.switchToAlphaNumericValidation = function(){
$scope.regex = $scope.alphaNumericRegex;
$scope.validationApplied="Alpha numeric";
return $scope.regex;}

And this code will work for you !!!

For complete demo click on the link given below.
http://plnkr.co/edit/TZ5coeQ3Pm1iY6j3utmC?p=preview

Advertisements

4 thoughts on “Change ‘ng-pattern’ dynamically in AngularJS

  1. Thank you, very useful!

  2. Great post. Thanks. But I have a question.

    What happens if there is more then one textbox controls? I have been trying to modify your program code with duplicating both $scope.regex AND .directive(‘applyValidation’, for each textbox.

    $scope.regex1
    $scope.regex2

    .directive(‘applyValidation1’,
    .directive(‘applyValidation2’,

    • Its more about how you design the control. There are different ways to achieve it. Simple way is that even you can pass pattern as parameter to the ‘directive’ textbox. So every textbox can have different patterns to validate.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s