2016-07-13 4 views
0

입력 값이 특성 값으로 설정된 사용자 지정 유효성 검사기가 있다고 가정 해 보겠습니다. 사용자 지정 유효성 검사기의 범위 변경에 대한 트리거 유효성 검사

$scope.isRequired = false; 

$scope.toggle = function() { 
    $scope.isRequired = !$scope.isRequired; 
}; 

그런 다음 우리는 우리가 정의 유효성 검사기를 사용하려고 폼을 만들 : 범위에
app.directive('inputRequired', function() { 
    return { 
     require: 'ngModel', 
     scope: { 
      inputRequired: '=' 
     }, 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.inputRequired = function(modelValue) { 
       return !(scope.inputRequired && ctrl.$isEmpty(modelValue)); 
      }; 
     } 
    }; 
}); 

우리는 변수의 값을 전환 할 변수와 함수를 정의합니다. 토글 기능을 호출하는 버튼도 추가됩니다.

<form> 
    <input type="text" ng-model="someModel" input-required="isRequired"/> 
    <button ng-click="toggle()">toggle</button> 
</form> 

어떻게 작동합니까? 폼이로드되고 범위가 초기화 될 때 isRequired 값은 false으로 설정됩니다. 따라서 입력 필드는 필요하지 않습니다. 토글 버튼을 클릭하면 isRequired의 값이 true으로 변경됩니다. 그러나! 유효성 검사기 범위의 변수가 변경 되었더라도 유효성 검사는 트리거되지 않습니다.

중요 사항 : 이것은 단지 예일뿐입니다. 이 기능을 구현하는 ng-required 지시문을 알고 있습니다. 유효성 검사기에 입력이 있고 필드의 유효성이 해당 입력에 의존하는 경우에 대한 일반적인 해결책이 필요합니다. 입력이 변경되면 필드를 즉시 다시 확인해야합니다.

답변

1

은 해결책을 발견 :

app.directive('inputRequired', function() { 
    return { 
     require: 'ngModel', 
     scope: { 
      inputRequired: '=' 
     }, 
     link: function(scope, elm, attrs, ctrl) { 
      ctrl.$validators.inputRequired = function(modelValue) { 
       return !(scope.inputRequired && ctrl.$isEmpty(modelValue)); 
      }; 

      scope.$watch("inputRequired", function() { 
       ctrl.$validate(); 
      }); 
     } 
    }; 
}); 
: inputRequired 변화를 확인 링크 기능의 범위에 감시자를 추가하고 $를 호출