AngularJs输入文本框仅允许大于零的值

Question

I am trying validate the textbox allow only integer number and greater than zero values. 我正在尝试验证文本框只允许整数和大于零的值。

Here I attached my code. 在这里，我附上了我的代码。

Html: HTML：

<body ng-app="myApp">
  NUMBER ONLY <input type="text" allow-pattern="\d" />

</body>

Js: JS：

var app = angular.module("myApp",[]);

app.directive('allowPattern', [allowPatternDirective]);

function allowPatternDirective() {
    return {
        restrict: "A",
        compile: function(tElement, tAttrs) {
            return function(scope, element, attrs) {
                element.bind("keypress", function(event) {
                    var keyCode = event.which || event.keyCode; // I safely get the 
                    if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
            event.preventDefault();
                        return false;
                    }          
                });
            };
        }
    };
}

Also I tried like this bellow: 我也像下面这样尝试：

<body ng-app="myApp">
  NUMBER ONLY <input type="text" allow-pattern="^[1-9][0-9]*$" />

</body>

But its not working. 但它不起作用。

Check jsfiddle link: click here 检查jsfiddle链接：单击此处

Answer 1

You can make use of angular form validation and also use ng-model-options 您可以使用角度形式验证，也可以使用ng-model-options

Here is the link to Codepen 这是Codepen的链接

Controller snippet : 控制器片段：

var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
 $scope.onlyNumbers = /^[1-9]+[0-9]*$/;
})

View : 查看：

<div ng-app="app">
<br />
<br />
<div class="col-md-2" ng-controller="myCtrl">
  <form name="myForm1">
  <div class="form-group" ng-class="{'has-error':myForm1.number1.$invalid}">
    <label for="">Following validation happens as the user entrs a value.</label>
    <input class="form-control" ng-pattern="onlyNumbers" ng-model="value1" name="number1"/> Valid? {{myForm1.number1.$valid}}
  </div>
</form>
<form name="myForm2">
  <div class="form-group" ng-class="{'has-error':myForm2.number2.$invalid}">
    <label for="">Following validation happens after blur </label>
    <input class="form-control" ng-pattern="onlyNumbers" ng-model="value2" name="number2" ng-model-options="{ updateOn: 'blur'}"/> Valid? {{myForm2.number2.$valid}}
  </div>
</form>

For more on how you can better this process through controllers refer this link 有关如何通过控制器改善此过程的更多信息，请参考此链接

AngularJs输入文本框仅允许大于零的值

问题描述

1 个解决方案

解决方案1
0 2016-03-31 10:36:37

AngularJs输入文本框仅允许大于零的值

问题描述

1 个解决方案

解决方案1 0 2016-03-31 10:36:37

解决方案1
0 2016-03-31 10:36:37