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。也没有成功。虽然如果我在指令中使用该函数它确实有效，但是在执行upload方法之前就会发生这种情况。

正如你所看到的，我是一个新手，我可能也有解决方案，但不知道应用它的正确方法。谢谢！

Answer 1

正确的approch是清除视图中的任何绑定数据，然后使用setPristine()中jsonUploadForm上的$scope。我建议你将所有绑定保存在$scope上的单个模型对象上，并将其设置为null。

有关详细信息，请参阅此答案： Resetting form after submit in Angularjs

使用AngularJS重置文件输入

1 个答案: