html - angularjs中的负值验证

Question

我使用的是 input type="number"但我得到的 View 是文本框中的上下值栏。如何避免这种情况？
如何验证输入文本框中的负值？。如果我输入负值作为输入，则应显示正确的错误消息。

Answer 1

but I am getting the view as up and down value bars in the text box. How to avoid this?

您可以使用简单的 CSS 在某些浏览器中删除这些微调按钮:

input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

(归功于 this answer )。但它在 IE 中不起作用。

现在真正的问题是，如何验证用户输入？在这种情况下，Angular 解决方案将创建额外的验证指令。这是我最近写的一个简单的:

angular.module('demo', []).directive('positive', [function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            ctrl.$validators.positive = function(value) {
                return value && value >= 0;
            };
        }
    };
}]);

input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.error {color: brown;}

<script src="https://code.angularjs.org/1.3.0/angular.js"></script>

<div ng-app="demo">
    
    <form name="paymentForm">
        <input type="number" name="amount" ng-model="amount" positive />
    </form>
    
    <div class="error" ng-show="paymentForm.amount.$error.positive">Amount should be positive number.</div>
</div>