Использование $setValidity внутри контроллера

Я пытаюсь сделать некоторую проверку на изменение файла. Вот мой код:

Вид/Шаблон

<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 не работает.
Есть какие-нибудь мысли?


javascript angularjs angularjs-controller angularjs-forms
person Churk    schedule 16.01.2013    source источник

Ответы (3)


arrow_upward
129
arrow_downward

Эта строка:

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

Должно быть

$scope.myForm.file.$setValidity("size", false);
person Ben Lesh    schedule 16.01.2013
comment
Может ли это работать так же внутри функции ссылки? Я получаю $setValidity не является функцией - person Winnemucca; 08.04.2016

arrow_upward
17
arrow_downward

$setValidity нужно вызывать в ngModelController. Внутри контроллера, я думаю, это означает $scope.myForm.file.$setValidity().

См. также раздел «Пользовательская проверка» на странице форм, если вы еще этого не сделали.

Кроме того, в качестве первого аргумента $setValidity используйте только «тип файла» и «размер».

person Mark Rajcok    schedule 16.01.2013
comment
Ха! Я написал то же самое в то же время. - person Ben Lesh; 16.01.2013
comment
@blesh, уже два дня подряд. - person Mark Rajcok; 16.01.2013
comment
На самом деле то, что вы, ребята, указали, было правильным, я сделал ошибку в setValidity(). Но моя проблема была не в этом, моя проблема заключалась в проблеме с областью действия. Я вызывал это на уровне ‹ввода›, в то время как форма выходит за рамки. Я действительно должен был сделать это: $scope.$on('$includeContentLoaded', function(e) { $scope.myForm = e.targetScope.myForm;}); - person Churk; 22.01.2013

arrow_upward
2
arrow_downward

Лучшее и оптимизированное решение для отображения нескольких сообщений проверки для одного элемента было бы таким.

<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

person Alvin Chettiar    schedule 01.07.2017