web-dev-qa-db-ja.com

コントローラー内での$ 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への呼び出しは機能していません。
何かご意見は？

javascriptangularjsangularjs-controllerangularjs-forms
75
Churk

この行：

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

あるべき

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

ngModelControllerで$ setValidityを呼び出す必要があります。コントローラー内部では、$scope.myForm.file.$setValidity()を意味すると思います。

フォームページ の「カスタム検証」セクションも参照してください（まだ行っていない場合）。

また、$ setValidityの最初の引数には、「filetype」と「size」のみを使用します。

17
Mark Rajcok

単一の要素に対して複数の検証メッセージを表示するためのより適切で最適化されたソリューションは、次のようになります。

<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によって提案されたものでなければなりません。

2
Alvin Chettiar