AngularJS directive for <input type="file"> validation

Question

I'm trying to make a directive able to handle an <input type="file"> validation inside a <form> given that AngularJS doesn't have support for this...It kind of works to check if a file is selected, but I also have a <textarea> in the form so when I select a file the form gets state $valid=true, but just by typing into the <textarea> makes the form become $valid=false even though I haven't set a validation for the <textarea>. Why does this happen? How can I fix it?. Here is a simplified example to illustrate the problem:

My app.js file:

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

      }
    };
  });

My index.html file:

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

there's a working plnkr of what I just said: http://plnkr.co/edit/k3KZpdX5q3pelWN21NVp?p=preview

georgeawg · Accepted Answer · 2018-11-20 05:25:27Z

1

A quick hack would be to just take the text-area out of the ng-form like this -

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

Problem is the Form is invalid in the beginning but you just force the value to true on change. Once you write something in the textarea, the Form reverts back to its original false value. I don't understand the code in your directive -

ERRONEOUS

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

A better approach would be to write Custom Validators on each of your ngModels like this -

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

edited Nov 20, 2018 at 5:25

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Nov 20, 2018 at 2:08

r10a

338 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gerard Over a year ago

Hi, I just modified code so the piece of code you said you "don't understand" it's clearer(it is meant to make the input always valid so we can see how the textarea it's what makes the program fail) also I changed the html code so I can see form.textArea.$valid and form.textArea.$invalid but doesn't show as you said, textArea is always $valid=true and $invalid=false.

r10a Over a year ago

@gerard Thanks for making the answer clearer. Regarding your doubt, it's not the form.textArea.$valid that changes, but form.$valid that reverts back to its original false value when the textArea is changed.

Collectives™ on Stack Overflow

AngularJS directive for <input type="file"> validation

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related