角验证输入型=＆QUOT;数＆QUOT; [英] angular validate input type="number"

问题描述

我有类似这样的标记：

<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>

和我想要的跨度表明，当用户不小心类型的第二个输入的信。简单吧？作为（可能）相关的问题，当用户移动第一滑动输入的第二输入的值将消失。为什么？如果我删除这不会发生类型数从标记。

And I want the span to show when the user accidentally types a letter in the second input. Simple, right? As an (probably) related problem, the value in the second input disappears when the user moves the first slider input. Why? This doesn't happen if I remove type-number from the markup.

需要明确的是：我希望用户能够立即看到错误提示时，它的类型的，没有任何提交行动。 （我preFER不具有在所有使用格式元素中的事实，但所有相关的演示似乎需要它。）

To be clear: I want the user to see the tooltip error immediately when it's typed, without any "submit" action. (I'd prefer not to have to use the form element at all in fact, but all the related demos seem to require it.)

http://jsfiddle.net/7FfWT/

任何解决方法是最欢迎的。请发表如果可能的话工作提琴。

Any workaround is most welcome. Please post a working fiddle if possible.

推荐答案

有似乎与一个奇怪的问题类型=数字与其他<$ C很好打$ C>输入。

在此谷歌组的帖子后应该让你在正确的轨道上。尤其是，最后发表的文章有：<一href=\"https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ\">https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

The posts in this google groups post should get you on the right track. In particularly, the last post there: https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

本的jsfiddle链接： http://jsfiddle.net/ABE8U/

The jsfiddle link is: http://jsfiddle.net/ABE8U/

作为变通，他做了一个指令：

As a work around, he's made a directive:

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

感谢Schmuli拉斯金

Credit to Schmuli Raskin

这篇关于角验证输入型=＆QUOT;数＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！