2014-07-23 7 views
2

사용자 나이를 확인하는 지시문을 작성하고 있으며이를 사용자 정의 마스크와 함께 사용하고 있습니다. (여기에서 유래의 차단 지시어 예에서 복사)ui-mask가있는 AngularJS 지시문

<input id="dateOfBirth" name="dateOfBirth" type="text" class="form-control" ng-model="owner.dateOfBirth" placeholder="mm/dd/yyyy" required ui-mask="99/99/9999" minimum-age="18"> 

및 지향성 : 같은 내 입력되는 HTML이 문제는 그 값이

angular.module('Pensco.AEW.Directives') 
.directive('minimumAge', function(){ 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attr, ngModel) { 
      var minimumAge = parseInt(attr.minimumAge, 10), 
       minDate = new Date(), 
       monthsToSubtract = 12 * minimumAge; 

      // subtract the months from today 
      minDate.setMonth(minDate.getMonth() - monthsToSubtract); 

      //For DOM -> model validation 
      ngModel.$parsers.unshift(function(value) { 
       var valid = isValid(value); 

       ngModel.$setValidity('minimumAge', valid); 

       return value; 
      }); 

      //For model -> DOM validation 
      ngModel.$formatters.unshift(function(value) { 
       var valid = isValid(value); 

       ngModel.$setValidity('minimumAge', valid); 

       return value; 
      }); 

      function cleanMask(value) { 
       var parts; 

       if (!value) { return; } 

       parts = value.split('/'); 

       parts[0] = checkLength(parts[0], 2, 'm'); 
       parts[1] = checkLength(parts[1], 2, 'd'); 
       parts[2] = checkLength(parts[2], 4, 'y'); 

       return parts.join('/'); 
      } 

      function checkLength(value, len, character) { 
       if (value.length > len) { 
        value = value.slice(0, - 1); 
       } else if (value.length < len) { 
        value = value + character; 
       } 

       return value; 
      } 

      function isValid(value) { 
       var cleanedValue = cleanMask(value), 
        dob = new Date(cleanedValue); 

       // if the date is valid then compare it to calculated min date 
       if (isDate(dob)) { 
        return dob <= minDate; 
       } 

       return false; 
      } 

      function isDate(value) { 
       return value instanceof Date && isFinite(value) 
      } 
     } 
    }; 
}); 

하다 때 사용자 A 형 ui-mask가 "0m/dd/yyyy"가되도록 플레이스 홀더 문자를 제거하지 않은 것처럼 보일 때 value는 "0mm/dd/yyyy"로 설정됩니다. ui-mask는 우선 순위가 100으로 설정되어 있으므로이 지시문의 우선 순위를 -1000으로 설정하여 지시문을 처리하기 전에 마스크 처리를 처리 할 수 ​​있다고 생각합니다. 지시문이 완료되면 ui-mask 처리가 끝나고 자리 표시 자 문자가 제거 된 것처럼 보입니다.

날짜를 정리하고 유효성을 검사하는 몇 가지 방법을 추가했으나 작동하는 깨끗한 방법이 있다고 생각합니다. ui-mask 처리 후 내 지시어를 어떻게 처리 할 수 ​​있는지에 대한 아이디어가 있습니까? 나는 당신의 code.In의 checklength의 Methos는에 문제를 발견

+0

앵귤러 지시자가 jquery 플러그인으로 대체되면 ui-mask를 링크 메소드로 초기화해야합니다. – Polochon

+0

개발자 도구를 열면 오류가 표시됩니다. TypeError : 'length'속성을 읽을 수 없습니다. – Seminda

답변

0

는 형식 오류를 던져 : 정의되지 않은

의 특성 '길이'를 읽을 수 없습니다 내가 제대로 작동

function checkLength(value, len, character) { 
      if(value!=undefined) 
      { 
      if (value.length > len) { 
       value = value.slice(0, - 1); 
      } else if (value.length < len) { 
       value = value + character; 
      } 
      } 

      return value; 
     } 

확인이 Working Sample에 코드를 변경해야 .