Використання $ setValidity всередині контролера


78

Я намагаюся перевірити зміну файлу. Ось мій код:

Перегляд / шаблон

<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не працює.
Будь-які думки?

Відповіді:


129

Цей рядок:

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

Має бути

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

1
Чи може це працювати однаково всередині функції посилання? Я отримую $ setValidity не є функцією
Віннемукка

17

$ setValidity потрібно викликати на ngModelController. Всередині контролера, я думаю, це означає $scope.myForm.file.$setValidity().

Дивіться також розділ "Спеціальна перевірка" на сторінці " Форми" , якщо ви цього ще не зробили.

Крім того, для першого аргументу $ setValidity використовуйте лише 'тип файлу' та 'розмір'.


1
Ха! Я розмістив одне і те ж одночасно.
Ben Lesh

1
@blesh, це вже два дні поспіль.
Mark Rajcok

Власне, те, що ви, хлопці, вказали, було правильним, я допустив помилку в setValidity (). Але не в цьому була моя проблема, проблема полягала в масштабі. Я закликав це на рівні <input>, поки форма поза сферою дії. Мені насправді довелося це зробити:$scope.$on('$includeContentLoaded', function(e) { $scope.myForm = e.targetScope.myForm;});
Чурк

2

Кращим та оптимізованим рішенням для відображення декількох повідомлень про перевірку для одного елемента буде таке.

<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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.