Geek Answers Handbook

$ dirty does not work as expected when the input type is a “file”,

Brand new for AngularJS. The problem is that I have a form with two fields - the name and profile pic, as shown in the code below. I am using ng-upload ( https://github.com/twilson63/ngUpload ). I want the "Save" button to work only if any field is dirty and loading is not currently taking place, so when I try to start several messages, I won’t be asked to click the "Save" button. But it looks like $ dirty works fine with the name field, but not with the profile pic field. Did I miss something? How to do it, as easy as possible for a beginner AngularJS. Any help would be appreciated.

             //Code
             <form id='picUpload' name='picUpload' ng-upload-before-submit="validate()" method='post' data-ng-upload-loading="submittingForm()" action={{getUrl()}} data-ng-upload='responseCallback(content)' enctype="multipart/form-data">
             <input type="text" name="name" data-ng-model="user.name" maxlength="15" id="user_screen_name" required>
             <input type="file" name="profilePic" data-ng-model="user.profilePic" accept="image/*">
             <div class="form-actions">
        <button type="submit" class="btn primary-btn" id="settings_save" data-ng-disabled="!(picUpload.name.$dirty|| picUpload.profilePic.$dirty) || formUploading">Save changes</button>
    </div>
</form>

             //In my JS code
             $scope.submittingForm = function(){
        $scope.formUploading = true;
             }

Hello!

+4
2

ng-upload, onchange . onchange , .

<input type="file" onchange="angular.element(this).scope().fileNameChanged(this)" />

Javascript:

var app = angular.module('MainApp', []);
  app.controller('MainCtrl', function($scope)
  {
    $scope.inputContainsFile = false;
    $scope.fileNameChanged = function(element)
    {
        if(element.files.length > 0)
          $scope.inputContainsFile = true;
        else
          $scope.inputContainsFile = false;
    }

  });

, , inputContainsFile,

+2

ng-file-dirty

  .directive('ngFileDirty', function(){
    return {
        require : '^form',
        transclude : true,
        link : function($scope, elm, attrs, formCtrl){
            elm.on('change', function(){
                formCtrl.$setDirty();
                $scope.$apply();
            }); 
        }   
    }   
  })
+11

More articles:


All Articles