angular validate input type ="number"

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*$/;