2

I have an input form field, of type number, that I am attempting to let Angular validate (which seems excellent so far), however I cannot seem to get the correct syntax for dynamically creating a regex to apply to ng-pattern that restricts the user to a range of numbers from min and max values that are passed to the controller after a json call.

This was quick and helpful:

ng-pattern for only numbers will accept chars like '-' in angular.js

So I initially set this on the ng-pattern and it works, but allows numbers outside the min & max range:

$scope.onlyNumbers = /^\d/;

However, I need to make the regex on the fly and make it a range, so I tried without much success:

$scope.onlyNumbers = new RegExp(".{" + $scope.min + "," + $scope.max + "}", "g");

I'm not a RegEx expert, obviously.

Any help is appreciated.

Thanks in advance!

Community
  • 1
  • 1
Kramericus
  • 47
  • 1
  • 7
  • What are possible values of min and max? – Braj Aug 15 '14 at 18:40
  • First step would be to make sure your RegExp works. I think `{}` is for repeat count so that would work for number of digits, but not for more limiting. I think your best bet would be to check it in code. – Jason Goemaat Aug 15 '14 at 18:44
  • The phrase "dynamically creating a regex" is a subcategory of "dynamically creating code and then evaluating it". This is almost always the wrong answer, and even when it's the right answer, it's not a good one... – Mark Reed Aug 15 '14 at 23:39
  • Reasonable ranges would be from 0 to 999 (triple digits), but more often 0 to 10 would be the real case. @user3218114 – Kramericus Aug 16 '14 at 13:34
  • I understand and agree @Mark Reed, if only from the PIA-factor, but ng-pattern looks so darn helpful for this mobile app - sadly I can't make the regex until I get the min & max at runtime (from the json call) – Kramericus Aug 16 '14 at 13:39

1 Answers1

2

Try using <input type="number">, then you can set min and max values directly without regexp.

html:

<div ng-app ng-controller="FormCtrl">
    <form name="form01">
        <input 
            type="number"
            min="{{range.min}}"
            max="{{range.max}}"
            ng-model="value"
            name="number"
            ng-class="{'error' : !form01.number.$valid}"
        >
    </form>
</div>

js:

function FormCtrl($scope) {
    $scope.range = {
        min: 10,
        max: 20
    };
}

css:

.error {
    border: 1px solid red;
    background: rgba(255,0,0,0.3);
}

demo: http://jsfiddle.net/dmmLgnqb/2/

Bodzio
  • 2,440
  • 2
  • 19
  • 37
  • I stripped down the form to having a name and an ng-submit, and stripped down my one input field to literally what you have above and in the fiddle (nice touch) and I even refactored the controller to literally use $scope.range and added the properties of mix and max as you do and put the exact css right on the page and I don't get the same behavior. I'm outputting the boolean form.number.$valid on the page and it doesn't read false when a numeric value is over the max or under the min. I checked and updated ng to v 1.2.22. No luck. @Bodzio – Kramericus Aug 16 '14 at 13:45
  • Try to display error object from that field `{{form01.number.$error}}` and paste what it shows (it should be something like this `{"number":false,"max":true,"min":false}` with `min` and `max` properties) – Bodzio Aug 16 '14 at 13:52
  • I output form.number.$error and get {"number": false} for numeric, and {"number": true} for alpha, but there's never a min or max in there. Thanks for sticking with me @Bodzio – Kramericus Aug 16 '14 at 14:12
  • Strange... Maybe try to add `novalidate` attribute to your input? This should disable native browser validation (``). – Bodzio Aug 16 '14 at 14:39
  • 1
    Novalidate didn't change the behavior. It is odd. However, I did solve my issue by creating ngMin and ngMax directives, which show up in the form.number.$error as shown here: http://jsfiddle.net/g/s5gKC/ This worked. – Kramericus Aug 17 '14 at 12:20
  • Nice! (comment to short bla bla bla) – Bodzio Aug 17 '14 at 21:34