Angular проверить тип ввода = "номер"

У меня такая разметка:

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

Любое обходное решение приветствуется. Если возможно, напишите рабочий стол.

Ответы

Ответ 1

Кажется, есть странная проблема, когда type="number" отлично играет с другими inputs.

Посты в этом сообщении google groups должны получить вас на правильном пути. В частности, последнее сообщение там: 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 || '');
            });
        }
    };
});

Кредит Шмули Раскину

Ответ 2

Также вы можете использовать ng-pattern как validator:

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

Ответ 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) || '$');
            });
    };
})

Ответ 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 лучше, чем я мог бы создать более элегантный код.

Ответ 5

jzm, s ответ - действительно замечательный трюк и спас мое время.

Я просто делаю это на один шаг и заменяю parseFloat(value) тем, что он на самом деле делает.

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

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