Как использовать одну директиву AngularJS для отображения сообщений об ошибках для нескольких файловых входов

Question

Как использовать одну директиву AngularJS для отображения сообщений об ошибках для нескольких файловых входов

0

У меня есть несколько входных файлов на одной странице, как указано ниже

<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>

saikat mukherjee 30 май 2016, в 14:54

Источник

Теги:

javascript

angularjs

html5

2 ответа

0

    <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>

Вы можете изменить что-то выше, чтобы ошибка отображалась только для определенного поля.

Thalaivar 30 май 2016, в 10:10

Ещё вопросы

Alec Kravets · Accepted Answer · 2016-05-30T12-09-00.000Z

Трудно манипулировать элементом ошибки, поскольку он находится вне вашей разметки директивы. Попросите свою директиву обернуть как 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/