$脏不当输入类型是如预期工作QUOT;文件＆QUOT; [英] $dirty not working as expected when the input type is "file"

问题描述

很新的AngularJS。问题是我有两个fields-姓名和个人资料图片一种形式显示在下面的code。我使用的NG-上传（ https://github.com/twilson63/ngUpload ）。我想如果有一个领域是脏等多个职务的请求没有上的保存按钮，用户点击引发的载没有当前出现的保存按钮才有效。不过貌似，$脏正常工作与名称字段，但不能与个人资料图片字段。我只是失去了一些东西？如何去了解它保持它尽可能简单的AngularJS的初学者。任何帮助将是AP preciated。

Am quite new to AngularJS. The issue is i have a form with two fields- 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 either field is dirty and the upload isn't happening currently so that multiple post requests are not triggered on the user clicking on the 'Save' button. But looks like, $dirty works fine with the 'name' field but not with the 'profile pic' field. Am i just missing something? How to go about it keeping it as simple as possible for a beginner of 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;
             }

祺！

推荐答案

我没用过NG-上传前，但你可以使用input元素onchange事件。 onchange事件被触发每当用户选择一个文件。

I haven't used ng-upload before, but you can use onchange event of input element. onchange event is fired whenever user selects a file.

＆LT;输入类型=文件的onchange =angular.element（本）.scope（）fileNameChanged（本）。/＆GT;

使用Javascript：

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 变量，名称字段的脏检查一起是真实的。

So now you can check if inputContainsFile variable is true along with dirty check of name field

这篇关于$脏不当输入类型是如预期工作QUOT;文件＆QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！