validate natural input number with ngpattern

Question

I use ng-pattern="/0-9/" to set price_field do not accept decimal number. But when I input natural number (from 0 to 9999999),ng-show gets activated with Not valid number!.

Where did I go wrong?. Please help.

<form name="myform" data-ng-submit="create()">
        <input type="number"
               name="price_field"
               data-ng-model="price"
               require
               ng-pattern="/0-9/">
        <span  ng-show="myform.price_field.$error.pattern">Not valid number!</span>
        <input type="submit" class="btn">
</form>

johnnyRose · Accepted Answer · 2017-03-28 19:47:27Z

126

The problem is that your REGX pattern will only match the input "0-9".

To meet your requirement (0-9999999), you should rewrite your regx pattern:

ng-pattern="/^[0-9]{1,7}$/"

My example:

HTML:

<div ng-app ng-controller="formCtrl">
  <form name="myForm" ng-submit="onSubmit()">
    <input type="number" ng-model="price" name="price_field" 
           ng-pattern="/^[0-9]{1,7}$/" required>
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
    <span ng-show="myForm.price_field.$error.required">This field is required!</span>
    <input type="submit" value="submit"/>
  </form>
</div>

JS:

function formCtrl($scope){
  $scope.onSubmit = function(){
    alert("form submitted");
  }
}

Here is a jsFiddle demo.

edited Mar 28, 2017 at 19:47

johnnyRose

7,53017 gold badges43 silver badges61 bronze badges

answered Nov 7, 2013 at 6:34

Chickenrice

5,7372 gold badges24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DanielM Over a year ago

According to the documentation (docs.angularjs.org/api/ng/directive/input), you could also write: ng-pattern="[0-9]{1,7}", which is a little bit more concise (and Angular already makes the HTML dirty enough, I think).

iamserious Over a year ago

Change the input type="number" to text, right now the chrome validation is kicking in before ng can and you can't see it in action

Bart Over a year ago

@iamserious you could also cancel Chrome validation by using HTML5's novalidate attribute: <form novalidate>, then you can/must do all validation checks with Angular.

Joel Peltonen Over a year ago

The jsFiddle allows the user to enter and submit "+13", so it doesn't work. Why is that? Also I can enter "+14e1" - shouldn't pattern disallow that? I know javascript thinks that's a number but I shouldn't be able to input it.

Nishchit · Accepted Answer · 2013-11-07 05:45:52Z

12

This is working

<form name="myform" ng-submit="create()">
    <input type="number"
           name="price_field"
           ng-model="price"
           require
           ng-pattern="/^\d{0,9}(\.\d{1,9})?$/">
    <span  ng-show="myform.price_field.$error.pattern">Not valid number!</span>
    <input type="submit" class="btn">
 </form>

answered Nov 7, 2013 at 5:45

Nishchit

19.2k12 gold badges58 silver badges81 bronze badges

Comments

Rajesh · Accepted Answer · 2015-12-02 09:49:17Z

<label>Mobile Number(*)</label>
<input id="txtMobile" ng-maxlength="10" maxlength="10" Validate-phone  required  name='strMobileNo' ng-model="formModel.strMobileNo" type="text"  placeholder="Enter Mobile Number">
<span style="color:red" ng-show="regForm.strMobileNo.$dirty && regForm.strMobileNo.$invalid"><span ng-show="regForm.strMobileNo.$error.required">Phone is required.</span>

the following code will help for phone number validation and the respected directive is

app.directive('validatePhone', function() {
var PHONE_REGEXP = /^[789]\d{9}$/;
  return {
    link: function(scope, elm) {
      elm.on("keyup",function(){
            var isMatchRegex = PHONE_REGEXP.test(elm.val());
            if( isMatchRegex&& elm.hasClass('warning') || elm.val() == ''){
              elm.removeClass('warning');
            }else if(isMatchRegex == false && !elm.hasClass('warning')){
              elm.addClass('warning');
            }
      });
    }
  }
});

Collectives™ on Stack Overflow

validate natural input number with ngpattern

3 Answers 3

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Linked

Related