Internet Explorer, шаблон ng и номер типа ввода при проверке формы

В веб-приложении, которое мы создаем, мы столкнулись с какой-то странной ошибкой, которая возникает только в Internet Explorer.

Проверка ввода, показанная в этом plunker, отлично работает во всех браузерах, кроме IE (мы должны поддерживать IE10+). Мы используем type="number" в наших вводах, которые ожидают числа, так как в большинстве браузеров так легко убедиться, что пользователь вводит только разрешенные символы. Мы также используем ng-pattern="/^\d+$/" для дополнительной проверки допустимого типа чисел, плюс это единственная проверка, которая есть в IE, поскольку тип ввода не поддерживается.

Проблема в том, что проверка ввода работает почти так, как ожидалось, за исключением случаев, когда мы вводим буквы в качестве первых символов нашего ввода (например, «abb45»). Он даже не думает, что это неверный ввод! Я видел в другом потоке SO, что ввод required на входе правильно вызовет проверку, но в нашем случае это конкретное поле вообще не является обязательным. Кроме того, даже если поле помечено как недействительное, сообщение проверки не отображается (я не уверен, откуда в этом случае возникает ошибка проверки).

Удаление type="number" является обходным путем (это решает проблему в IE), но мы предпочли бы попытаться найти другое решение, прежде чем вносить это изменение, которое нарушило бы «гладкость» числового ввода в других браузерах.

Примечание: мы не используем jQuery (только jQuery lite, так как angular имеет его как зависимость).


javascript validation angularjs internet-explorer ng-pattern
person Chatonne    schedule 23.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, у IE есть проблема с type="number" . Я бы посоветовал вам тоже использовать директиву, чтобы принимать только числа

angular.module('moduleName').directive('numbersOnly', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
            function fromUser(text) {
                if (text) {
                    var transformedInput = text.replace(/[^-0-9\.]/g, '');

                    if (transformedInput !== text) {
                        ngModelCtrl.$setViewValue(transformedInput);
                        ngModelCtrl.$render();
                    }
                    return transformedInput;
                }
                return undefined;
            }            
            ngModelCtrl.$parsers.push(fromUser);
        }
    };
});

, В html добавьте атрибут number-only к

Ex: <input number-only />
person Abhi    schedule 23.11.2016
comment
Хорошо, я попробую и сообщу, решило ли это мою проблему, спасибо! - person Chatonne; 23.11.2016