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?

Antworten:


129

Diese Linie:

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

Sollte sein

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

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


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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.