Why is Angularjs ng-pattern not working with the following regexp?

Will picture Will · Apr 9, 2014 · Viewed 85k times · Source

For some reason the initialized value doesn't appear in the field, but the second field without the ng-pattern does work. any ideas?

    angular.module('app', []).controller('MainCtrl', function($scope) {
      $scope.widget = {title: 'abc', title2: 'abc'};
    });

    <div ng-app="app" ng-controller="MainCtrl">
     <input ng-model="widget.title" required ng-pattern="/[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/">
     <br /><br />   
     input 1: {{ widget.title }}
     <br /><br />   
     <input ng-model="widget.title2" required>
     <br /><br />   
     input 2: {{ widget.title2 }}
    </div>

Here is the Fiddle http://jsfiddle.net/wkzab/1/

Answer

Ved picture Ved · Aug 25, 2014

I too was facing same problem. Found a workaround to do this.

You have to do something like this in your controller.

$scope.myRegex = /[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/; (don't put expression in quotes)

Finally

<input ng-model="widget.title" required ng-pattern="myRegex">

It will now be working.