Угловая потребность в директиве разрывает мой собственный
-
21-12-2019 - |
Вопрос
У меня есть пользовательская директива, сделанная после Фильтры На NG-модели на входе это ограничивает вход только для цифр:
.directive('onlydigitinput', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
.replace(/[^0-9]+/g, '');
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
})
.
работает отлично в одиночестве, но используется вместе с, по-видимому, стандартная директива
Я использую следующий HTML (нефритовый синтаксис):
input(type='text' , required, onlydigitinput, min='1', max='99', maxlength='2')
.
(не использую тип типа= «номер», поскольку он позаряжены с помощью MaxLength: maxlength игнорируется для типа ввода=" номер "в Chrome , а также игнорирует мою директиву)
Когда я вводю цифры, он работает нормально. Поле действительно. Когда я пытаюсь вводить цифру, а затем некоторую букву, он работает нормально: поле действителен, и я не могу ввести незначить. Но когда я начинаю с незначающих, поле недействительна, но я все еще могу ввести буквы, которые сопровождаются следующей ошибкой:
TypeError: Cannot read property 'toLowerCase' of undefined
at http://localhost:3000/scripts/core/directives/systemDirectives.js:63:54
.
Ссылаясь на использование TolowerCase в Директиве выше. Пожалуйста, совет, как я могу очистить эту ошибку и сделать мою директиву хорошо работать также в последнем случае и избежать ошибки.
Решение
У вас есть обязательный валектор поле на поле ввода.Следовательно, когда вы устанавливаете поле для пустым («») - происходит при вводе незначающих.Значение становится <сильным> undefined .
var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
.replace(/[^0-9]+/g, '');
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
.
Добавьте ниже сверху вышеуказанного кода:
if(!inputValue) return ;
.