ng-pattern not working for form validation

Question

I have tried to use a lot of regex which I found on the internet but with no luck. I am trying to validate if a form's input ranges between 0-100 (both 0 & 100 are valid inputs) but for some reason The error is not showing up. Pasting my code below

<form class="row" name="myForm">
    <div ng-repeat="month in plan.months" class="form-group">
        <div class="col-sm-2">{{month.label}}  : </div>
        <div class="col-sm-10">
        <input type="text"
           name="name"
           ng-model="month.value"
           class="form-control"
           ng-pattern="/^([1-9]?[0-9])$/"
        />
        <br />
    </div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
    </div>
</form>

Why not just use input[number] with a min/max? The example on this page covers your exact scenario. https://docs.angularjs.org/api/ng/input/input%5Bnumber%5D — Matthew Green, Feb 15 '16 at 16:36
see this : http://stackoverflow.com/questions/11873570/angularjs-for-loop-with-numbers-ranges — xkeshav, Feb 15 '16 at 16:38
Work but doesn't allowed 0 before: `ng-pattern="/^(100|[1-9]?[0-9])$/"` Tell me if you want to allowed 0 Here a fiddle: http://jsfiddle.net/yvbenitah/oy14oxu2/33/ — IsraGab, Feb 15 '16 at 16:56
@israGab your fiddle is working great but when I integrate it with my code it is not working ;( — Vijay, Feb 15 '16 at 17:48
@Vijay: you should have another issue. Do you have a javascript error in the console? — IsraGab, Feb 15 '16 at 17:49
What do you mean by 'no luck'? The example in the doc does in fact work and would cover your situation. How does it not cover the case you need? That might shed more light on why you are having this issue. — Matthew Green, Feb 15 '16 at 17:53
@MatthewGreen i tried using the exact same code but just changing the input type to number, but still the validation error is not showing up when I enter a number beyond the rgeex exprssion. — Vijay, Feb 15 '16 at 18:07
@Vijay, instead of _{{month.label}} _ try {{myForm.name.$error.pattern}} and tell me what is the value. like here: http://jsfiddle.net/yvbenitah/oy14oxu2/35/ — IsraGab, Feb 15 '16 at 18:27
Ok. Now write 799 in the input. (false should change to true) — IsraGab, Feb 15 '16 at 19:46

score 0 · Answer 1 · answered Feb 15 '16 at 16:48

try this,

<form class="row" name="myForm">
    <div ng-repeat="month in plan.months" class="form-group">
        <div class="col-sm-2">{{month.label}}  : </div>
        <div class="col-sm-10">
        <input type="text"
           name="name"
           ng-model="month.value"
           class="form-control"
           ng-pattern="/^([0-9]|[1-9][0-9]|[1-9][0-9][0])$/"
        />
        <br />
    </div>
<span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 & 100</span>
    </div>
</form>

Also refer this

anuragsimgeker · Answer 2 · 2016-02-16T05:32:39.553

It's because you cannot use a regular form with ng-repeat because of multiple inputs with the same name. Use ng-form inside ng-repeat to get isolated forms.

Also if you want numbers, just use input type=number with min and max values instead of using ng-pattern.

See working example https://jsfiddle.net/asimgeker/yjmoLtvv/

<div ng-app>
  <div ng-controller="MyCtrl">
    <div ng-repeat="month in months" class="form-group">
      <ng-form name="myForm">
        <div class="col-sm-2">{{month.label}} : </div>
        <div class="col-sm-10">
          <input type="number" min="0" max="100" name="myName" ng-model="month.value" class="form-control" />
          <br />
        </div>
        <div style="color: red" ng-show="myForm.myName.$error.max">Should be less than 101</div>
        <div style="color: red" ng-show="myForm.myName.$error.min">Should be greater than -1</div>
      </ng-form>
    </div>
  </div>
</div>

Not technically right that you must use `ng-form`, but this answer is on the right track. The problem is that multiple inputs of your form have the same name. — ryanyuyu, Feb 15 '16 at 22:25
@anurag you were right about the form being inside ng-repeat , thanks :) — Vijay, Feb 17 '16 at 17:45

Andrew Luhring · Answer 3 · 2016-02-15T22:37:39.103

Is there a reason you're using a text input rather than a number input?

If not, try this:

https://jsfiddle.net/kqupg84y/

<form class="row" name="myForm">
        <div class="col-sm-2">{{month.label}}  : </div>
        <div class="col-sm-10">
        <input type="number"
           name="name"
           ng-model="month.value"
           class="form-control"
           min="0"
           max="100"
        />
        <br />
    </div>
  <span class="error" style="color:red" ng-show="myForm.name.$error.pattern">Please enter a Percentage value between 1 &amp; 100</span>
  {{myForm.$error}}

(i removed ng-repeat for simplicity of fiddle)

That doesn't answer your question about using an ng-pattern though.

That being said, your regex may just be a bit off. rather than

/^([1-9]?[0-9])$/

you could try:

/^[0-9]+$/

if you're trying to match any number between 0 and 100. Your regex looks like it's trying to match any number that is between 1 and 9, potentially followed by any other number... but if you're trying to make it inclusive of 0 and 100, i'm not sure it works as expected.

The tool I generally use for checking my regular expressions is:

http://regexr.com/

score 0 · Answer 4 · answered Feb 15 '16 at 22:47

Your problem is that multiple inputs in your form have the same name. You need to add some uniqueness to the input names. A quick and dirty way to make form element names unique is to bind the name property to an expression that uses the $index of the ng-repeat like name="month{{$index}}. Then you can use Javascript's bracket notation to access the correct form element from the form controller:

<div ng-repeat="month in plan.months" class="form-group">
    <div class="col-sm-2">{{month.label}}  : </div>
    <div class="col-sm-10">
       <input type="text"
          name="month{{$index}}"
          ng-model="month.value"
          class="form-control"
          ng-pattern="/^[1-9]?[0-9]$|^100$/"
       />
       <br />        
    </div>
    <span class="error" style="color:red" 
          ng-show="myForm['month' + {{$index}}].$error.pattern">
          Please enter a Percentage value between 1 & 100
    </span>
</div>

Here's a plunker demonstrating this in action. As an aside, your pattern incorrectly failed the string "100", so I added an alternative to the regex.

score 0 · Accepted Answer · answered Feb 17 '16 at 17:43

@anurag -- the Solution you provided worked for numbers above 100 but was failing for below 0 numbers & @andrew -- The same with your solution, was not throwing a validation error unless I enter -100 (ng-maxlength = 3) is working but that is not how we need it.

The original issue was with my Regex, finally the code that worked for me is

<form class="row" name="myForm">
    <div class="col-sm-2">{{month.label}}  : </div>
    <div class="col-sm-10">
        <input type="number"
               name="percent_monthly_targets"
               ng-model="month.value"
               class="form-control"
               ng-pattern="/^[0-9][0-9]?$|^100$/"
            />
     <br />
        <span class="alert alert-danger" ng-show="myForm.percent_monthly_targets.$error.pattern">Please enter a Percentage value between 1 &amp; 100</span>
    </div>
    </form>

ng-pattern not working for form validation

5 Answers5