Verwenden von $ setValidity in einem Controller

78

Ich versuche, eine Überprüfung der Dateiänderung durchzuführen. Hier ist mein Code:

Ansicht / Vorlage

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

Regler

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

Aber im Moment $setValidityfunktioniert der Anruf bei nicht.
Irgendwelche Gedanken?

javascript angularjs angularjs-controller angularjs-forms Churk
quelle

Antworten:

129

Diese Linie:

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

Sollte sein

$scope.myForm.file.$setValidity("size", false);
Ben Lesh
quelle
1
Kann dies innerhalb einer Link-Funktion genauso funktionieren? Ich bekomme $ setValidity ist keine Funktion
Winnemucca
17

$ setValidity muss auf dem ngModelController aufgerufen werden. Ich denke, das bedeutet im Controller $scope.myForm.file.$setValidity().

Siehe auch Abschnitt "Benutzerdefinierte Validierung" auf der Seite " Formulare" , falls Sie dies noch nicht getan haben.

Verwenden Sie für das erste Argument für $ setValidity nur 'Dateityp' und 'Größe'.

Mark Rajcok
quelle
1
Ha! Ich habe das Gleiche zur gleichen Zeit gepostet.
Ben Lesh
1
@blesh, das sind jetzt zwei Tage hintereinander.
Mark Rajcok
Eigentlich war das, worauf ihr hingewiesen habt, richtig. Ich habe einen Fehler in setValidity () gemacht. Aber dort war mein Problem nicht, mein Problem war das Scoping-Problem. Ich habe dies auf der <input> -Ebene aufgerufen, während das Formular außerhalb des Gültigkeitsbereichs liegt. Ich musste das tatsächlich tun:$scope.$on('$includeContentLoaded', function(e) { $scope.myForm = e.targetScope.myForm;});
Churk
2

Eine bessere und optimierte Lösung zum Anzeigen mehrerer Validierungsnachrichten für ein einzelnes Element wäre wie folgt.

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

Der Controller-Code sollte der von @ Ben Lesh vorgeschlagene sein

Alvin Chettiar
quelle