angularjsregexangularjs-validation

validate natural input number with ngpattern


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>

Solution

  • 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.