CODEWITHSUNDEEP
angularjs
Matt Knight
Matt Knight

Reputation: 499

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: https://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.

Upvotes: 2

Views: 7222

Answers (1)

Lex
Lex

Reputation: 7194

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>

Update
Service

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

Controller

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

Upvotes: 2

Related Questions