Question

我有这样的标记：

<form name="myForm" ng-controller="myCtrl" novalidate>
    <input ng-model="theValue" type="range" min="0" max="100" required>
    <input ng-model="theValue" type="number" required></input>
    <span ng-show="theValue.$error.number">Hey! No letters, buddy!</span>
</form>

我希望当用户在第二个输入中意外键入字母时显示跨度。简单吧？作为（可能）相关问题，当用户移动第一个滑块输入时，第二个输入中的值消失。为什么？如果我从标记中删除type-number，则不会发生这种情况。

要明确：我希望用户在键入时立即看到工具提示错误，而不进行任何“提交”操作。（事实上，我根本不需要使用form元素，但所有相关的演示似乎都需要它。）

http://jsfiddle.net/7FfWT/

非常欢迎任何解决方法。如果可能的话，请发一个工作小提琴。

Answer 1

type="number"与其他inputs很好地合作似乎有一个奇怪的问题。

此google群组帖子中的帖子可以让您走上正确的轨道。特别是那里的最后一个帖子：https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

jsfiddle链接是：http://jsfiddle.net/ABE8U/

作为一种解决方法，他做了一个指示：

.directive('toNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function (value) {
                return parseFloat(value || '');
            });
        }
    };
});

归功于Schmuli Raskin

Answer 2

您也可以使用ng-pattern作为验证器：

<input type="number" ng-model="theValue" name="theValue" step="1" min="0" max="10"  ng-pattern="integerval" required>
<span ng-show="form.theValue.$invalid">Hey! No letters, buddy!</span>

$scope.integerval = /^\d*$/;

Answer 3

我已更新指令以使用ng-repeat过滤器。注意＆＃39; $＆＃39;，这是一个通配符。这个指令应该处理0就好了。它在

上故障转移到通配符

.directive('toNumber', function() {
    return {
        require: 'ngModel',
        link: function(scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function(value) {
                return value===0 ? 0 : (parseFloat(value) || '$');
            });
    };
})

Answer 4

jzm的答案对我有用，直到我需要'0'作为输入。我调整了jzm的代码：

.directive('toNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            ctrl.$parsers.push(function (value) {
                if (value === 0)
                    return 0;

                return parseFloat(value || '');
            });
        }
    };
});

注意添加if (value === 0)块。

比我更能理解JavaScript逻辑比较的人可能会创建更优雅的代码。

Answer 5

jzm，答案真的很精彩，节省了我的时间。

我只是更进一步，将parseFloat(value)替换为它实际做的事情。

directive('number', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModel) {

            ngModel.$parsers.push(function (value) {
                if (value==null)
                  return NaN;
            });
        }
    };
});

angular validate input type =“number”

5 个答案: