Директива AngularJS для проверки <input type = "file"> - PullRequest
Новая
       1

Директива AngularJS для проверки <input type = "file">

0 голосов
/ 20 ноября 2018

Я пытаюсь сделать директиву способной обрабатывать проверку <input type="file"> внутри <form>, учитывая, что AngularJS не поддерживает это ... Это работает, чтобы проверить, выбран ли файл, ноУ меня также есть <textarea> в форме, поэтому, когда я выбираю файл, форма получает состояние $ valid = true, но при вводе в <textarea> форма становится $ valid = false, даже если я не установилпроверка для <textarea>.Почему это происходит?Как я могу это исправить?Вот упрощенный пример, иллюстрирующий проблему:

Мой файл app.js: 

    var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});



app.directive('validFile', function () {
    return {
      restrict: "A",
      require: '^form',

      link: function (scope,elem,attrs, ctrl) {

        elem.bind("change", function(e) {
          console.log("change");
          scope.$apply(function(){
              ctrl.$valid=true;
              ctrl.$invalid=false;
          });
        });

      }
    };
  });

Мой файл index.html: 

    <!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <div ng-form="myForm" >
    <input ng-model="filename" valid-file required type="file"/>
    <button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i>&nbsp;Ok</button>
    <div >
      <textarea name="observations" rows="3" cols="50" ng-model="observations"></textarea>
    </div> 
    <p> 
      Input is valid: {{myForm.$valid}} Input is invalid: {{myForm.$invalid}}
      <br>Selected file: {{filename}}
      <br>Area is valid: {{myForm.observations.$valid}} Area is invalid: {{myForm.observations.$invalid}}
    </p>
  </div>
</body>
</html>

естьрабочий план того, что я только что сказал: http://plnkr.co/edit/k3KZpdX5q3pelWN21NVp?p=preview

1 Ответ

0 голосов
/ 20 ноября 2018

Быстрый взлом состоял бы в том, чтобы просто взять текстовую область из ng-формы следующим образом - 

<div ng-form="myForm">
  <input id="userUpload" ng-model="filename" archivo-valido 
         name="userUpload" required type="file"
         accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
</div>
<button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary">
  <i class="icon-white icon-ok"></i>&nbsp;Ok
</button>

Проблема в том, что Form в начале invalid, но вы просто принудительно устанавливаете значение true на change. Как только вы что-то напишите в textarea, Form вернется к своему первоначальному значению false. Я не понимаю код в вашей директиве -

ОШИБОЧНАЯ 

 scope.$apply(function(){
        if(true){ // will always evaluate to true. Why the else part then?
          ctrl.$valid=true;
          ctrl.$invalid=false;
        }else{
          ctrl.$valid=false;
        }
      });

Лучшим подходом было бы написать пользовательских валидаторов на каждой из ваших моделей ng, как это - 

app.directive('archivoValido', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
  ctrl.$validators.archivoValido = function(modelValue, viewValue) {
    if (ctrl.$isEmpty(modelValue)) {
      // consider empty models to be valid
      return true;
    }
     // your custom validation here
     ...
     // it is invalid
    return false;
  };
 }
};
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...