Angularjs 角度1.5-提交后清除表格

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

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

这就是我的答案： 当我试图复制这段代码时，什么也没发生。没有错误，没有任何内容被清除

这是我的密码：

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。

您构建此功能的方式存在一些基本问题。我认为您使用

vm.ctrl

以及

ng controller=“HiringRequestCtrl as ctrl”

会让您感到困惑。下面是我推荐的[未经测试的]更改。（我还建议将

$http

内容移动到一个服务中，并使用

.then（）

和

.catch（）

，因为

.success（）

和

.error（）

不推荐使用）

控制器

HTML

控制器

---

谢谢你的帮助。对于Angular来说，获得一个基本的配方（包括不推荐的内容、最佳实践等）真的很有帮助。谢谢你的帮助。离题-您建议我如何将$http移动到服务？我已更新了答案，以显示您可能如何使用服务-这使其他控制器可以使用该服务，并使您的控制器代码专注于作为模型和视图之间的链接。简洁且编写良好。再次感谢莱克斯。你好，只要你没有必填字段，这个就可以了。对于必填字段，您将继续获取ng invalid required。知道怎么解决吗？Thanks@Bill只要输入具有

required

属性且不包含数据，就会设置

ng invalid

和

ng invalid required

。如果您希望调节错误消息的显示（例如），除了

formName.formElement.$invalid

（或

formName.formElement.$dirty

，具体取决于您的需要）之外，还应选中

formName.formElement.$invalid

。这将允许您仅在用户实际通过输入而未输入所需值时显示错误消息。这是否解决了您遇到的问题？当您使用“ui路由器”进行导航时，最简单的方法是使用“$state.reload”（“myStatePathToThisForm”）重新加载当前状态；

.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) {});
    }
});

<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
            });
    }