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.