Required attribute Not working with File input in Angular Js
angularjs, forms, javascript
Solution
It's the ngModelController that does the validation in Angular based on attributes like `require`. However, currently there is no support for `input type="file"` with the ng-model service. To get it working you could create a directive like this:
app.directive('validFile',function(){
return {
require:'ngModel',
link:function(scope,el,attrs,ngModel){
//change event is fired when file is selected
el.bind('change',function(){
scope.$apply(function(){
ngModel.$setViewValue(el.val());
ngModel.$render();
});
});
}
}
});
Example markup:
<div ng-form="myForm">
<input id="userUpload" ng-model="filename" valid-file name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<button ng-disabled="myForm.$invalid" type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Ok</button>
<p>
Input is valid: {{myForm.userUpload.$valid}}
<br>Selected file: {{filename}}
</p>
</div>
Check out my working plnkr example.
Problem
I have a file upload control in my form.I am using Angular JS . When I put the required attribute to validate that the file is selected it is not working. ``` <input id="userUpload" name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> <button type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Ok</button> ``` Can you please suggest why the required is not working ?