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

一尘不染

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

angularjs

我有这样的标记：

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

任何解决方法都是最欢迎的。请尽可能发布有用的小提琴。

阅读 194

2020-07-04

共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

2020-07-04