javascripthtmlangularjsformsng-file-upload

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


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?


Solution

  • 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