Validation doesnt work for File Input with 'Required' attribute- AngularJS

Neel picture Neel · Apr 1, 2014 · Viewed 10.8k times · Source

I have been playing around this and couldnt get it to work. I was creating an angular form and I was able to get the validation to work when required attribute is added to the text field. However, if a input type file is added with required attribution, I noticed that the $error.required text is shown but it doesnt validation even if a file is chosen. Its still showing as invalid even after adding a file. I have created a sample in jsfiddle so you can check this out: http://jsfiddle.net/Alien_time/kxSaz/6/

Doesnt validation work for file inputs? How can I add a required option and validate it when using file select?

Answer

Jake Johnson picture Jake Johnson · Apr 1, 2014

ngModelController doesn't currently support input type=file.

you can solve your issue with a custom directive.

app.directive('validFile',function(){
  return {
    require:'ngModel',
    link:function(scope,el,attrs,ngModel){
      el.bind('change',function(){
        scope.$apply(function(){
          ngModel.$setViewValue(el.val());
          ngModel.$render();
        });
      });
    }
  }
});

see usage here