validation - 角度验证输入类型=“数字”

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.

这个谷歌群组帖子中的帖子应该让你走上正轨。特别是那里的最后一篇文章：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 过滤器。注意'$'，它是一个通配符。这个指令应该处理 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 的回答真是绝妙的把戏，节省了我的时间。

我只是把它更进一步，并用parseFloat(value)它实际做的替换。

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

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