16

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/

Ved
  • 11,837
  • 5
  • 42
  • 60
Will
  • 271
  • 1
  • 3
  • 12

3 Answers3

49

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.

Ved
  • 11,837
  • 5
  • 42
  • 60
  • 6
    Argh! Just spent like an hour trying to figure out why the pattern wasn't working. I was putting it directly in the attribute `pattern` then `ng-pattern` They really need to document that better. Thanks! – m.e.conroy Jul 14 '15 at 20:29
  • @ved , what if am getting regular expression as string from there server, i mean , i have $scope.myRegex = "/[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/"; any way now? – vivex Sep 29 '15 at 14:37
  • @Vivek Take a case, if you put regex as string, i mean inside " ", Now how you write a regex that will match a quotes. For detailed information please visit : https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions. – Ved Sep 30 '15 at 07:19
  • Just a side note, In my controller I have wrapped the regex in quotes and it still works. – Harry Feb 22 '16 at 11:10
  • @Harry can you create a fiddle of your code. I will show you the difference. – Ved Mar 02 '16 at 06:01
  • @Ved here is my regex that I am using "[a-zA-Z._^%$#!~@,']+" – Harry Mar 02 '16 at 09:08
  • Please post a fiddle, so that I can check how you are using it. – Ved Mar 02 '16 at 09:14
  • 2
    Thanks for mentioning not to put it in quotes - that was my issue – Martin D Jun 13 '16 at 17:15
  • Just for information, if you are copy-pasting regex in to Intellij IDEA, then you might see that '\' is replaced with double '\\'. Even pattern on HTML looks the same, input does not getting validated! So replace double slashes with single. http://jsfiddle.net/wkzab/1492/ – Dmitri Algazin Oct 26 '18 at 16:36
19

UPDATE

I looked into it a bit (never really used Angular), and by using the name attribute on the form and inputs, you can grab an error like shown in my newest JSFiddle. Its in the format: {{formName.inputName.$error}}. This returns an object with parameters that equal a boolean. So {{form.title.$error.pattern}} will be true when there is an error with the regular expression (so you would display the error). I also cleaned (works the same) your regex to: /^[A-Z]{4}\d{6}[A-Z\d]{3}$/i.

OLD

The ng-pattern attribute attempts to match the field based on this regular expression: /[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/. This translates to 4 alphabetical characters, 6 digits, and 3 alphanumeric characters. Once you have a matching pattern, it will show up.

You should be able to remove the ng-pattern attribute or change the expression to be less specific. For example, this JSFiddle will accept any value as long as the entire string is alphanumeric. Update the question if you want help with a different pattern.

Sam
  • 20,096
  • 2
  • 45
  • 71
  • Great answer, the thing is I'm looking to validate that pattern (ABCD123456X3Z) which is the mexican tax id number, and I want to be able to show an error message like: The string ABCDEF that you entered is not valid. Where "ABCDEF" is the user input. – Will Apr 09 '14 at 03:51
  • Thanks for your time and effort @Sam your rock! but I'm still unable to access the field's value when it hasn't matched the pattern. Maybe this is the way angular is supposed to work? Should I just accept this? The two weird behaviors are: 1. On page load the first field doesn't contain the initial value that was set on the controller. 2. As soon as I start typing, the "title" attribute in the "widget" object disappears. (I know that it appears again when it matches de pattern) – Will Apr 09 '14 at 05:18
  • Not quite sure if that's an intended Angular behavior, or if there is a way around it. I would assume its intended though. Think if you have a model with a property `zip` that must match `[0-9]{5}`, you them use this zip to query a database for restaurants. If the default value (or the value someone inputs) is "abc", should `zip` equal "abc" or `null`? I think `null` so it isn't used elsewhere (i.e. incorrectly querying the DB). – Sam Apr 09 '14 at 05:23
  • 1
    I still think this is weird. One should be able to access the value even if it is incorrect so you can tell the user.. "the value" is not a valid value. Anyway I'll mark your answer as correct for pointing all of these things out. – Will Apr 09 '14 at 05:30
  • I agree its a little odd. Even though [the documentation](http://docs.angularjs.org/api/ng/directive/input#!) doesn't seem to specifically say it works like this or how to work around it, you can see that it is normal behavior if you replace the last name to something too short in their example. – Sam Apr 09 '14 at 05:34
  • You're right, same issue in their example. Thanks a lot @Sam ! – Will Apr 09 '14 at 05:36
1

Yes indeed! This was causing me an issue to...leaving the quotes out is what fixed it for me.

 $scope.regVal= /([A-Z]{3}\s?(\d{3}|\d{2}|d{1})\s?[A-Z])|([A-Z]\s?(\d{3}|\d{2}|\d{1})\s?[A-Z]{3})|(([A-HK-PRSVWY][A-HJ-PR-Y])\s?([0][2-9]|[1-9][0-9])\s?[A-HJ-PR-Z]{3})/;
EltonFlow
  • 101
  • 2