CODEWITHSUNDEEP
javascriptangularjshtml
gerard
gerard

Reputation: 127

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

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

Upvotes: 0

Views: 1767

Answers (1)

r10a
r10a

Reputation: 33

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

Upvotes: 1

Related Questions