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

AngularJs Input textbox allow only greater than zero value

本文关键字：大于 许大于 文本 输入 AngularJs      更新时间：2023-10-14

我正在尝试验证文本框是否只允许整数和大于零值。

我在这里附上了我的代码。

Html:

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

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;
                    }          
                });
            };
        }
    };
}

我也试过这样的咆哮：

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

但它不起作用。

检查jsfiddle链接：点击此处

您可以使用角度形式验证，也可以使用ng模型选项

这是Codepen 的链接

控制器片段：

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

视图：

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

有关如何通过控制器改进此过程的更多信息，请参阅此链接

相关文章：