컨트롤러 내에서 $ setValidity 사용


78

파일 변경에 대한 유효성 검사를 시도하고 있습니다. 내 코드는 다음과 같습니다.

보기 / 템플릿

<input type="file" name="file" id="file"  
       onchange="angular.element(this).scope().setFile(this)" 
       required />

<span class="error" ng-show="myForm.file.$error.required">Error</span>
<span class="error" ng-show="myForm.file.$error.size">Selected file is too large</span>
<span class="error" ng-show="myForm.file.$error.filetype">Unsupported File type</span>

제어 장치

angular.module("myapp").controller("myctrl", function($scope) {
  $scope.setFile = function(element) {
    $scope.$apply(function($scope) {
      var fileObject = element.files[0];
      $scope.file.fileType = 
         fileObject.type.toUpperCase().substring(fileObject.type.indexOf("/") + 1);

      // Validation
      if (!$scope.isValidFileType($scope.file.fileType)) {
        myForm.file.$setValidity("myForm.file.$error.filetype", false);
      }

      if (fileObject.size > 1000*1000*10) {
        myForm.file.$setValidity("myForm.file.$error.size", false);
      }
    });
  };

  $scope.isValidFileType = function(fileExtension) {
    var supportedExtensions = ["doc", "docx", "ppt", "pptx", "jpg", "gif", "png"]; // etc.
    return (jQuery.inArray(fileExtension, supportedExtensions) > -1);
  }
});

그러나 지금은 호출 $setValidity이 작동하지 않습니다.
이견있는 사람?

답변:


129

이 줄 :

myForm.file.$setValidity("myForm.file.$error.size", false);

해야한다

$scope.myForm.file.$setValidity("size", false);

1
이것은 링크 기능 내에서 동일하게 작동 할 수 있습니까? 나는 $의 setValidity는 함수가 아닙니다 무엇입니까
Winnemucca

17

$ setValidity는 ngModelController에서 호출되어야합니다. 컨트롤러 내부에서는 $scope.myForm.file.$setValidity().

아직하지 않은 경우 양식 페이지 의 "사용자 지정 유효성 검사"섹션을 참조하십시오 .

또한 $ setValidity의 첫 번째 인수에는 'filetype'과 'size'만 사용하십시오.


1
하아! 나는 같은 시간에 같은 것을 게시했습니다.
Ben Lesh 2013 년

1
@blesh, 이제 이틀 연속입니다.
Mark Rajcok 2013 년

사실, 너희들이 지적한 것은 옳았다. 나는 setValidity ()에서 실수를했다. 그러나 그것은 내 문제가 아니었고 내 문제는 범위 지정 문제였습니다. 양식이 범위를 벗어나는 동안 <input> 수준에서 이것을 호출했습니다. 사실이 작업을 수행했다 :$scope.$on('$includeContentLoaded', function(e) { $scope.myForm = e.targetScope.myForm;});
Churk

2

단일 요소에 대해 여러 유효성 검사 메시지를 표시하는 더 좋고 최적화 된 솔루션은 다음과 같습니다.

<div ng-messages="myForm.file.$error" ng-show="myForm.file.$touched">
 <span class="error" ng-message="required"> <your message> </span>
 <span class="error" ng-message="size"> <your message> </span>
 <span class="error" ng-message="filetype"> <your message> </span>
</div>

컨트롤러 코드는 @ Ben Lesh가 제안한 코드 여야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.