a diretiva angular require quebra a minha
-
21-12-2019 - |
Pergunta
Eu tenho uma diretiva personalizada, feita depois filtros no modelo ng em uma entrada, que restringe a entrada apenas a dígitos:
.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;
});
}
};
})
funciona muito bem sozinho, mas usado em conjunto com, aparentemente, a diretiva padrão obrigatório, começa a falhar.
Eu uso o seguinte HTML (sintaxe jade):
input(type='text' , required, onlydigitinput, min='1', max='99', maxlength='2')
(Eu não uso type='number' pois isso mexe com maxlength: maxlength ignorado para input type = "number" no Chrome, e também desconsidera minha diretiva)
Quando insiro dígitos, funciona bem.O campo é válido.Quando tento inserir um dígito e depois alguma letra, funciona bem:campo é válido e não consigo inserir não dígito.Mas quando inicio sem dígito, o campo é inválido, mas ainda consigo inserir letras, o que vem acompanhado do seguinte erro:
TypeError: Cannot read property 'toLowerCase' of undefined
at http://localhost:3000/scripts/core/directives/systemDirectives.js:63:54
referindo-se ao uso de toLowerCase na diretiva acima.Por favor, informe como posso eliminar esse erro e fazer com que minha diretiva funcione bem também no último caso, e evitar o erro.
Solução
Você tem um validador de campo obrigatório no campo de entrada.Portanto, quando você define o campo como em branco("") - acontece quando você digita não-dígito.O valor passa a ser indefinido.
var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
.replace(/[^0-9]+/g, '');
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
Adicione o abaixo no topo do código acima:
if(!inputValue) return ;