在控制器内部使用$ 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不起作用。
有什么想法吗?

Answers:


129

这行:

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

应该

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

1
链接功能内部是否可以相同?我收到$ setValidity不是函数
Winnemucca

17

$ setValidity需要在ngModelController上调用。在控制器内部,我认为这意味着$scope.myForm.file.$setValidity()

如果尚未,请参阅“表单”页面上的“自定义验证”部分。

同样,对于$ setValidity的第一个参数,仅使用'filetype'和'size'。


1
哈!我在同一时间发布了相同的内容。
Ben Lesh 2013年

1
@blesh,现在已经连续两天了。
Mark Rajcok

实际上,你们指出的是正确的,我在setValidity()中确实犯了一个错误。但这不是我的问题所在,我的问题是范围界定问题。当表单超出范围时,我在<input>级别调用此方法。我实际上必须这样做:$scope.$on('$includeContentLoaded', function(e) { $scope.myForm = e.targetScope.myForm;});
Churk

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建议的代码

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.