How to empty(or reset) all the input fields on a form after successfull submission in AngularJS in following code?

Question

I've a following controller code with me :

var app = angular.module('app_name');

app.controller("manageUsersController", [ "config", "$scope", "$http", "$mdToast",
    function(config, $scope, $http, $mdToast) {

        $scope.add = function() {
            var userData = {
                email : $scope.manageUsers.email,
                password : $scope.manageUsers.password,
                schoolId : '1',
                name : $scope.manageUsers.name,
                mobileNumber : $scope.manageUsers.mobileNumber
            };
            $http.post(config.webServicesUrl.postAddUser, userData, headerConfig).success(
                    function(data) { 
                                    displayToastMessage("User added successfully", $mdToast);
                    }).error(function(error) { 
                        console.log(error.error);                   
            });             
        }
    }]);

All the HTML fields are input fields and are accessed using $scope object.

I tried with $setPristine but it didn't work.

Somebody please help me in setting all the fields to empty upon successful submission of form only in my code.

Thanks.

Answer 1

If you want to reset your form upon completion, I think you have to reset the $scope.manageUsers object manually once your post request has resolve:

  $http.post(config.webServicesUrl.postAddUser, userData, headerConfig).success(
    function(data) {
      // has I don't know if you have other properties
      // I reset each property manually,
      // but you could probably do $scope.manageUsers = {}
      $scope.manageUsers.email = null;
      $scope.manageUsers.password = null;
      $scope.manageUsers.name = null;
      $scope.manageUsers.mobileNumber = null;
      displayToastMessage("User added successfully", $mdToast);
    }).error(function(error) {
    console.log(error.error);
  });

Answer 2

You can use $setPristine() here:

$http.post(config.webServicesUrl.postAddUser, userData, headerConfig).success(
  function(data) {
    displayToastMessage("User added successfully", $mdToast);
    $scope.form.$setPristine(); // <---------here.
  }).error(function(error) {
  console.log(error.error);
});

Plnkr demo in action.

Answer 3

It should work for you.

 $http.post(config.webServicesUrl.postAddUser,userData,headerConfig)
               .success(function(data) { 
                  $scope.manageUsers={};                      
                  displayToastMessage("User added successfully.", $mdToast);
              }).error(function(error) { 
                  console.log(error.error);                   
             });