I am AngularJS noob. I was trying to implement a form, that requires all input fields to be filled including the file upload input.
Exactly like the first ecample: https://angular-file-upload.appspot.com/
So I created a simple form to test this out:
<form name="myForm">
<input id="userUpload" ng-model="filename" name="userUpload" required type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
<input id="userName" ng-model="username" name="name" required type="text" />
<button ng-disabled="myForm.$invalid" class="btn btn-primary">Ok</button>
</form>
However this doesn't work. The OK button will forever stay disabled. I discovered that if I add the attribute ngf-select=""
to the file input field:
<input id="userUpload" ng-model="filename" name="userUpload" required ngf-select="" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
then the form works as expected. OK button becomes enabled when both userName
and userUpload
input fields are filled. I tried googling ngf-select
but couldn't find a satisfactory answer. What does it do and why is it necessary for the form to function as expected?
There is a problem with input files in angular see the next fiddle it will help you.
in main controller put this, to give the current scope to your prototype scope:
MyCtrl.prototype.$scope = $scope;
after just include this prototype function
MyCtrl.prototype.setFile = function(element) {
var $scope = this.$scope;
$scope.$apply(function() {
$scope.filename = element.files[0];
});
};
now on input files you can call
onchange="MyCtrl.prototype.setFile(this)"
and it will update the scope :) with will after update the validation on form