Question

我已经阅读了所有建议的帖子，但在提交后我似乎无法清除表单字段。

我使用控制器作为语法，但即使我尝试将$ scope与$ setPristine一起使用，我仍然无法使其工作。

这个答案就是我所遵循的： https://stackoverflow.com/a/37234363/2062075 当我尝试复制此代码时，没有任何反应。没有错误，没有任何东西被清除。

这是我的代码：

app.controller('HiringRequestCtrl', function ($http) {
    var vm = this; //empty object
    vm.ctrl = {};

    vm.saveChanges = function() {
        //console.log(vm);
        $http({
            method: 'POST',
            url: '/hiringrequest/createPost',
            data: angular.toJson(vm)
        })
            .success(function (response) {
                //great, now reset the form
                vm.ctrl = {};

            })
            .error(function (errorResponse) {

            });

    }
});

我的表单如下：

<div ng-controller="HiringRequestCtrl as ctrl">
<form id="form" name="ctrl.myForm">
...

    <input type="text" name="proposalName" ng-model="ctrl.proposalName"/>
  <input type="submit" id="saveButton" value="Submit" class="button" ng-click="ctrl.saveChanges()" />
  ...  

</form>
</div>

我真的不想使用$ scope。

Answer 1

你的结构方式存在一些基本问题。我认为您使用vm.ctrl然后ng-controller="HiringRequestCtrl as ctrl"会让您感到困惑。以下是我推荐的[未经测试]更改。（我还建议将$http内容移到服务中并使用.then()和.catch()，因为.success()和.error()已被弃用。

控制器的

.controller('HiringRequestCtrl', function($http) {
    var vm = this; // self-referencing local variable required for when promise resolves
    vm.model = {};

    vm.saveChanges = function() {
        $http({
                method: 'POST',
                url: '/hiringrequest/createPost',
                data: angular.toJson(vm.model)
            })
            .success(function(response) {
                //great, now reset the form
                vm.model = {}; // this resets the model
                vm.myForm.$setPristine(); // this resets the form itself
            })
            .error(function(errorResponse) {});
    }
});

HTML 的

<div ng-controller="HiringRequestCtrl as ctrl">
    <form id="form" name="ctrl.myForm" ng-submit="ctrl.saveChanges()" novalidate>
        <input type="text" name="proposalName" ng-model="ctrl.model.proposalName" />
        <input type="submit" id="saveButton" value="Submit" class="button" />
    </form>
</div>

<强>更新
服务

.service('hiringService', function($http) {
    var service = {};
    service.createPost = function(model) {
        return $http({
                    method: 'POST',
                    url: '/hiringrequest/createPost',
                    data: angular.toJson(model)
                });
    }
    return service;
}

控制器的

.controller('HiringRequestCtrl', function(hiringService) {
    vm.saveChanges = function() {
        hiringService.createPost(model)
            .then(function(response) {
                // if you need to work with the returned data access using response.data
                vm.model = {}; // this resets the model
                vm.myForm.$setPristine(); // this resets the form itself
            })
            .catch(function(error) {
                // handle errors
            });
    }

Angular 1.5 - 提交后的清晰表格

1 个答案: