a diretiva angular require quebra a minha

Question

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.

Answer 1

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 ;