当正则表达式限制为数字时，ng-pattern允许使用“ +”字符

Question

Am using the regex /^[0-9]+$/ to limit the input of the text box to only accept numbers. It's working fine but when the types something like +124 then also it's not setting the text box as invalid.

<form name="myForm" novalidate>
  <input type="number" ng-model="age" name="age" ng-pattern="/^[0-9]+$/" />
  <h3>Valid Status : {{myForm.age.$valid}}</h3>
</form>

Input: 123 Output: myForm.age.$valid - true

Input: -123 Output: myForm.age.$valid - false

Input: +123 Output: myForm.age.$valid - true (shouldn't be true)

https://plnkr.co/edit/3OVE6qiWgJozUb3hyFQ5?p=preview

Answer 1

If you want to make the pattern work, you need to set the type attribute to text . Since you also want to let users type only digits into the input field, add an onkeypress validation:

<input type="text"  onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57" ng-model="age" name="age" ng-pattern="/^[0-9]+$/" />

Actually, you won't even need the ng-pattern regex then.

Answer 2

You can just use:

ng-pattern="/^[0-9]+$/"

Without setting the input type to number (as default it is text and it should work fine).

Here JSFiddle: https://jsfiddle.net/3ju3b2tu/1/