각도 필요 지침은 내 자신의 것을 깨뜨린다

Question

나는 필터를 포함하여 사용자 정의 지침을 가지고 있습니다 입력 의 NG-MODEL에서 숫자 입력을 제한합니다.

     .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 (jade syntax) :

input(type='text' , required, onlydigitinput,  min='1', max='99', maxlength='2')

.

(maxLength : Chrome 의 입력 유형="숫자 "에 대해 무시되었으며, 또한 내 지시문을 무시합니다.

숫자를 입력하면 잘 작동합니다. 필드가 유효합니다. 숫자를 입력하고 일부 문자를 입력하려고하면 잘 작동합니다. 필드가 유효하고 비 자리를 입력 할 수 없습니다. 그러나 내가 아닌 숫자에서 시작하면 필드가 잘못되었지만 여전히 문자를 입력 할 수 있습니다. 이는 다음 오류가 수반됩니다.

TypeError: Cannot read property 'toLowerCase' of undefined
at http://localhost:3000/scripts/core/directives/systemDirectives.js:63:54

.

위 지침에서 tolowercase의 사용을 참조합니다. 이 오류를 해결할 수있는 방법을 조언하고 후자의 경우도 지시문을 잘 수행하고 오류를 피하십시오.

Answer 1

입력 필드에 필수 필드 유효성 검사기가 있습니다.따라서 필드를 공백으로 설정할 때 ( "")가 아닌 자리를 입력 할 때 발생합니다.값은 undefined 가됩니다.

var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
              .replace(/[^0-9]+/g, '');
            if (transformedInput != inputValue) {
                modelCtrl.$setViewValue(transformedInput);
                modelCtrl.$render();
            }

.

위의 코드 위에 아래를 추가하십시오 :

if(!inputValue) return ;

.