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

【问题标题】：How to use a single AngularJS directive to display error messages for multiple file inputs如何使用单个 AngularJS 指令显示多个文件输入的错误消息
【发布时间】：2016-05-30 22:29:52
【问题描述】：

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

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

我的指令如下

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);
        });
    }
};

现在我面临的问题是，当单个上传显示错误时，所有输入都显示错误，因为我正在使用一个类那么我应该怎么做才能使用相同的指令唯一地显示错误

下面是我的跨度

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

【问题讨论】：

标签： javascript angularjs html

【解决方案1】：

很难操作错误元素，因为它在指令的标记之外。让你的指令像这样包装file input 和error block：

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

然后通过改变作用域的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';
        });
    }
  });
}

这是执行此操作的角度方式。

这里是工作基本示例：https://jsfiddle.net/aleckravets/awuLh6gu/

【讨论】：

@saikatmukherjee，然后接受答案；）

【解决方案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>

您可以将某些内容更改为上述内容，以便仅将错误显示到特定字段。

【讨论】：