What does ngf-select do and why is it needed for form validation?

Question

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?

Answer 1

ngf-select is a file upload directive which defines what happens when you select the file.

You can add your file upload logic function to be executed with ngf-select as ngf-select="uploadFunction($file)" which would ensure that the file is automatically uploaded once it is selected by the user from the computer and you don't have to click the upload button.

ngf-select basically defines what happens when you select a file from your computer.

Answer 2

There is a problem with input files in angular see the next fiddle it will help you.

jsFiddle

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