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.