지시문을 사용하여 Angularjs 초기 양식 유효성 검사

Question

$ setValidity를 사용하여 양식의 유효성을 설정하는 데 사용되는 valid-number이라는 유효성 검사 명령이 있습니다.이 값은 지시문이 적용된 입력 상자에 입력 한 모든 텍스트 값에 유효합니다 특성으로.

html로는 또한 유효성 검사와 같은 트리거하고 값을 입력하면 잘못된 clsss에 CSS를 설정합니다, 그러나

angular.module('test',[]).directive('validNumber',function(){ 
      return{ 
       require: "ngModel", 
       link: function(scope, elm, attrs, ctrl){ 

        var regex=/\d/; 
        ctrl.$parsers.unshift(function(viewValue){ 
         var floatValue = parseFloat(viewValue); 

         if(regex.test(viewValue)){ 
          ctrl.$setValidity('validNumber',true); 
         } 
         else{ 
          ctrl.$setValidity('validNumber',false); 
         } 
         return viewValue; 
        }); 
       } 
      }; 
     }); 

를 따를 때이 지침은

<form name="numberForm"> 
<input name="amount" type="text" ng-model="amount" required valid-number /></form> 

입니다 예를 들어 내가 $scope.amount = 'not a number'으로 설정하면 입력 상자에 지시문이 적용되었지만 기쁨이 없을 것으로 예상됩니다. 예를 들어 페이지가 처음로드 될 때 상자가 초기화됩니다. not a number을 유효하지 않은 것으로 강조 표시하려면 지시문을 트리거하는 입력 내용을 변경해야합니다.

<input>이 초기화 된 상태에서 지침이 적용되는지 어떻게 확인할 수 있습니까?

전체 코드 예제는 여기에 있습니다.

http://jsfiddle.net/JW43C/5/

Answer 1

$parsers 배열은 그 모델이 수신 값에 적용 할 기능의 목록이 포함되어 있습니다 보기에서 (사용자가 입력 한) $formatters 배열에는 뷰에 표시되기 전에 모델 값에 적용되는 함수 목록이 포함됩니다. 당신의 지시에

가 올바르게 $parsers 배열을 사용하지만, 당신은 또한 초기 값을 검증하려는 경우 $formatters 배열을 추가해야합니다 후

angular.module('test',[]).directive('validNumber',function(){ 
    return{ 
    require: "ngModel", 
    link: function(scope, elm, attrs, ctrl){ 
     var regex = /^\d$/; 
     var validator = function(value){ 
     ctrl.$setValidity('validNumber', regex.test(value)); 
     return value; 
     }; 

     ctrl.$parsers.unshift(validator); 
     ctrl.$formatters.unshift(validator); 
    } 
    }; 
}); 

Demo plunker

Answer 2

당신은 단순히이 fiddle에서처럼 연결 단계 동안 검증 함수를 호출 할 수 있습니다 :

link: function(scope, elm, attrs, ctrl) {      
    var regex=/\d/; 
    var verificationFunction = function(viewValue) { 
     var floatValue = parseFloat(viewValue); 

     if(regex.test(viewValue)) { 
      ctrl.$setValidity('validNumber',true); 
      return viewValue; 
     } 
     else { 
      ctrl.$setValidity('validNumber',false); 
      return undefined; 
     } 
    }; 

    ctrl.$parsers.unshift(verificationFunction); 
    verificationFunction(); 
} 

Answer 3

(> =) 각도 1.3.1 버전이 출시되면 각도 확인 지시문 스타일 (예 : required, maxlength)을 따라 조금 올바른 방법으로 해당 동작을 구현할 수 있습니다. 당신이 $validators 배열의 속성으로 귀하의 유효성 검사기를 추가해야하고 $parsers 또는 $formatters의 필요가 더 이상 없다이 경우

는 :

var app = angular.module('test', []); 
 

 
app 
 
    .directive('validNumber', function() { 
 
    return { 
 
     require: "ngModel", 
 
     link: function(scope, elm, attrs, ctrl) { 
 
     var regex = /^\d+$/; 
 

 
     ctrl.$validators['validNumber'] = function(modelValue, viewValue) { 
 
      return regex.test(viewValue); 
 
     }; 
 
     } 
 
    }; 
 
    }); 
 

 
app.controller('NumberCtrl', NumberCtrl); 
 

 
function NumberCtrl($scope) { 
 
    $scope.amount = '5z'; 
 
};

input.ng-invalid { 
 
    background-color: #FA787E; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
 

 
<div ng-app="test"> 
 
    <div ng-controller="NumberCtrl"> 
 

 
    <div ng-form name="numberForm"> 
 
     <input name="amount" 
 
      type="text" 
 
      ng-model="amount" 
 
      required 
 
      valid-number /> 
 
     
 
     <span ng-show="numberForm.amount.$error.validNumber"> 
 
     Doesn't look like an integer 
 
     </span> 
 
    </div>   
 
    </div> 
 
</div>