如何使用单个AngularJS指令显示多个文件输入的错误消息

I have multiple file inputs in a single page as given below

我在一个页面中有多个文件输入,如下所示

<input data-file="cancelledCheque" name="cancelledCheque" type="file"
 class="fileUpload" ng-file-select="onFileSelect($files)" accept=".jpg,.jpeg">

My directive is as below

我的指示如下

App.directive("ngFileSelect", function () {
return {
    link: function ($scope, el) {
        el.on('click', function () {
            this.value = '';
        });
        el.bind("change", function (e) {
            $scope.file = (e.srcElement || e.target).files[0];
            var allowed = ["jpeg", "jpg"];
            var found = false;
            var img;
            $scope.filevaliderror = false;
            img = new Image();
            allowed.forEach(function (extension) {
                if ($scope.file.type.match('' + extension)) {
                    found = true;
                    $('.filevaliderror').css('display', 'none');
                }
            });
            if (!found) {
                //alert('file type should be .jpeg, .jpg');
                $('.filevaliderror').css('display', 'block');
                return;
            }
            img.onload = function () {
                //var dimension = $scope.selectedImageOption.split(" ");
                //if (dimension[0] == this.width && dimension[2] == this.height) {
                    allowed.forEach(function (extension) {
                        if ($scope.file.type.match('' + extension)) {
                            found = true;
                            $('.filevaliderror').css('display', 'none');
                        }
                    });
                    if (found) {
                        if ($scope.file.size <= 4194304) {
                            $scope.getFile();
                            $('.filevaliderror').css('display', 'none');
                        } else {
                            //alert('file size should not be greater then 4 Mb.');
                            //$scope.file.value = "";
                            //$scope.filevaliderror = true;
                            $('.filevaliderror').css('display', 'block');
                        }
                    } else {
                        //alert('file type should be .jpeg, .jpg,');
                        //$scope.filevaliderror = true;
                        $('.filevaliderror').css('display', 'block');
                    }
                //} else {
                //    alert('selected image dimension is not equal to size drop down.');
                //}
            };
            img.src = URL.createObjectURL($scope.file);
        });
    }
};

Now the Problem I am facing is when a single upload is getting the error displayed all the inputs are displaying the error since I am using a class so what should I do to display error uniquely using same directive

现在我面临的问题是,当单个上传显示错误时,所有输入都显示错误,因为我正在使用类,所以我该如何使用相同的指令唯一地显示错误

Given below is my span

以下是我的跨度

<span class="filevaliderror" style="padding-top:4px; color:#af0e0e">Upload a valid File</span>

2 个解决方案

#1

It is hard to manipulate the error element since it is outside of your directive's markup. Have your directive wrap both the file input and error block like this:

很难操纵错误元素,因为它超出了指令的标记。让你的指令包装文件输入和错误块如下:

<div ng-select-file>
  <input type="file"/>
  <span ng-show="error">{{error}}"</span>
</div>

and then show or hide the error by changing the error property of the scope:

然后通过更改作用域的error属性来显示或隐藏错误:

link: function ($scope, el) {
  el.find('input').bind('change', function (e) {
    var file = (e.srcElement || e.target).files[0];
    $scope.error = '';

    // validate input and show errors...
    var isValid = false;

    if (!isValid) {
        $timeout(function(){
            $scope.error = 'Wrong file type';
        });
    }
  });
}

This is the angular way of doing this.

这是这样做的有条理的方式。

Here the working basic sample: https://jsfiddle.net/aleckravets/awuLh6gu/

这里的工作基本样本:https://jsfiddle.net/aleckravets/awuLh6gu/

#2

    <span class="filevaliderror" style="padding-top:4px; 
         color:#af0e0e" ng-if="submitted && 
             form.cancelledCheque.$error.cancelledCheque">Upload a valid File Error</span>
    <span ng-if="submitted && form.cancelledCheque.$error.required">required</span>

You could change something to above so that the error shown only to a particular field.

您可以将某些内容更改为上方,以便仅将错误显示给特定字段。

#1