ファイル入力をAngularJSでリセットする

Question

多くのチュートリアルを終えたが、状況を正しく処理する方法を理解できていない。ご覧になり、この問題のトラブルシューティングを手伝ってください。

jsonファイルをアップロードしたフォームを送信します。次に、「送信」ボタンがクリックされるとすぐにファイル入力フィールドをリセットします。

メソッドclearData（）は、データベースからのデータの削除要求を送信しますが、ファイル入力フィールドのみを消去したいとします。ここで

は私のフォームのレイアウトです：

<form id="json-upload-form" name="jsonUploadForm" enctype="multipart/form-data"> 
    <div class="row"> 
     <div class="col-md-12 json-upload-file"> 
     <div class="fileinput fileinput-new" data-provides="fileinput"> 
      <span class="choose-file-label">Select JSON file</span> 
      <span class="btn btn-default btn-file uui-button"> 
      <span class="fileinput-new">Choose file</span> 
      <span class="fileinput-exists">Change file</span> 
      <input type="file" name="files" file-model="json.file"/> 
      </span> 
      <span class="fileinput-filename" ng-model="filename"></span> 
      <a href="#" class="close fileinput-exists" data-dismiss="fileinput">×</a> 
     </div> 
     <button class="uui-button green" id="json-upload-button" ng-click="submit()">Upload file</button> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
     <button type="button" class="uui-button green" id="json-clear-button" ng-click="clearData()">Clear data</button> 
     </div> 
    </div> 
</form> 

ここで私は、ファイルの値に探し指示している：

：

angular.module('adminSmokeReportsApp') 
.directive('fileModel', [ 
    '$parse', 
    function ($parse) { 
     return { 
      restrict: 'A', 
      link: function (scope, element, attrs) { 
       var model = $parse(attrs.fileModel); 

       element.bind('change', function() { 
        model.assign(scope, element[0].files[0]); 
        scope.$apply(); 
       }); 
      } 
     } 
    }]); 

はここでデータをポストサービスが来ます

angular.module('adminSmokeReportsApp') 
.service('multipartForm', [ 
    '$http', 
    function ($http) { 
     this.post = function (uploadUrl, data) { 
      var formData = new FormData(); 
      formData.append("files", data.file); 

      $http.post(uploadUrl, formData, { 
       transformRequest: angular.identity, 
       headers: { 
        'Content-Type': undefined 
       } 
      }); 
     } 
    }]); 

最後に、アクションを処理するコントローラ：

angular.module('adminSmokeReportsApp') 
.controller('JsonUploadCtrl', [ 
    '$scope', 
    'config', 
    'multipartForm', 
    function ($scope, config, multipartForm) { 
     $scope.clearData = function() { 
      $.ajax({ 
       url: config.clearTestDataUrl, 
       success: function() { 
        alert("All data cleared!"); 
       } 
      }); 
     }; 

     $scope.json = {}; 

     $scope.submit = function() { 
      var uploadUrl = config.jsonUploadFormUrl; 
      multipartForm.post(uploadUrl, $scope.json); 
     }; 
    }]); 

私は最初の状態を保存してから、次にangular.copyを使用して変更を加える方法を試しました。結局、myForm。$ setPristine（）はそのトリックをしていないようです。

また、要素にval（）を呼び出してnullに設定したいと考えました。成功もありません。このディレクティブで関数を使用するとうまくいくが、アップロードメソッドが実行される瞬間に起こる。

ご覧のとおり、私は初心者ですが、解決策もあるかもしれませんが、それを適用する正しい方法については考えていません。ありがとう！

Answer 1

右の手順は、ビューからバインドされたデータをすべて消去して、$scopeのjsonUploadFormのsetPristine()を使用することです。 $scope上の単一のモデルオブジェクトにすべてのバインディングを保持し、nullに設定することをお勧めします。

詳細については、この答えを参照してください： Resetting form after submit in Angularjs