ng-pattern not working for form validation - angularjs

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>

Answer 1

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

Answer 2

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 & 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/

Answer 3

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.

Answer 4

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>

Answer 5

#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 & 100</span>
</div>
</form>