AngularJS防止数字输入添加十进制值

问题描述 投票:0回答:1

我有以下类型的输入:

<input class="number text-center" type="number" step="1" ng-model="item.formattedQuantity" ng-disabled="item.discount === '100.00'" ng-change="change(item)" ng-blur="blur(item)" min="0" />

我该如何禁止用户添加十进制值?我尝试添加step = 0.01和ng-pattern ng-pattern =“ / ^ [0-9] + $ /”,但用户仍然可以放置1.5、31.56等值]

我该怎么办?

angularjs validation design-patterns input numbers
1个回答
0
投票

您需要创建一个指令来实现这一目标。

app.directive('numericInput', function () {
    return  {
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl) {
            elm.on('input', function (event) {
                var regex = RegExp('^[0-9]+$');
                if(regex.test(event.target.value)){
                    event.preventDefault(); 
                    return true;
                else {
                    event.preventDefault(); return false;
                }
            });
        }
    }
});

或者您可以尝试angularjs样式(found codepen here

app.directive('numericInput', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^0-9]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

然后用您的html

<input numeric-input class="number text-center" type="number" step="1" ng-model="item.formattedQuantity" ng-disabled="item.discount === '100.00'" ng-change="change(item)" ng-blur="blur(item)" min="0" />
© www.soinside.com 2019 - 2024. All rights reserved.