$setValidity gebruiken in een controller

Ik probeer een validatie uit te voeren op bestandswijzigingen. Hier is mijn code:

Bekijken/sjabloon

<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>

Controller

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);
  }
});

Maar op dit moment werkt de aanroep naar $setValidityniet.
Enig idee?


Antwoord 1, autoriteit 100%

Deze regel:

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

Zou moeten zijn

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

Antwoord 2, autoriteit 13%

$setValidity moet worden aangeroepen op de ngModelController. Binnen de controller denk ik dat dit $scope.myForm.file.$setValidity()betekent.

Zie ook de sectie “Aangepaste validatie” op de Formulieren-pagina, als u dat nog niet heeft gedaan.

Gebruik ook voor het eerste argument voor $setValidity alleen ‘filetype’ en ‘size’.


Antwoord 3, autoriteit 2%

Een betere en geoptimaliseerde oplossing om meerdere validatieberichten voor een enkel element weer te geven zou er als volgt uitzien.

<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>

Controllercode moet degene zijn die wordt voorgesteld door @ Ben Lesh

Other episodes