Matt Knight Matt Knight - 5 months ago 790
AngularJS Question

Angular 1.5 - Clear form after submit

I have read through all of the suggested postings on this, but I can't seem to clear the form fields after I submit.

I am using controller as syntax, but even if I try to use $scope with $setPristine, I still can't make it work.

This SO answer is what I am following:
http://stackoverflow.com/a/37234363/2062075
When I try to copy this code, nothing happens. No errors, nothing is cleared.

Here is my code:

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) {

});

}
});


and my form looks like this:

<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>


I would really prefer not to use $scope.

Lex Lex
Answer

There's some fundamental issues with the way you've structured this. I think your use of vm.ctrl and then also ng-controller="HiringRequestCtrl as ctrl" is confusing you. Below are my recommended [untested] changes. (I would also suggest moving the $http stuff into a service and using .then() and .catch() because .success() and .error() are deprecated).

Controller

.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>