提交POST AngularJS后表格未清除

Question

I'm using angularjs frontend and Play framework backend to process posted data.

The challenge i'm facing is that the form is not resetting after successful posting of data I click submit.

My View is as below and is as below.

<form name="signupForm" ng-submit="signup()" novalidate>
 <div>
   <label for="email">Email</label>
   <input name="email" class="form-control" type="email" id="email" placeholder="Email"
          ng-model="email">
   </div>
 <div>
   <label for="password">Password</label>
   <input name="password" class="form-control" type="password" id="password"
          placeholder="Password" ng-model="password">

 </div>
 <button type="submit" class="btn btn-primary">Sign up!</button>
</form>

My Angular controller is as below

angular.module('clientApp')
   .controller('SignupCtrl', function ($scope, $http, $log) {
     $scope.signup = function() {
       var payload = {
         email : $scope.email,
         password : $scope.password
       };

       $http.post('app/signup', payload)
           .success(function(data) {
             $log.debug(data);
           });
     };
   });

I'm using chrome browser. How do i get to clear the email and password fields after clicking submit?

Answer 1

Set the $scope.email and $scope.password to null like

$http.post('app/signup', payload)
   .success(function(data) {
     $log.debug(data);

      $scope.email = null;
      $scope.password = null;
      $scope.signupForm.$setPristine(); //Set form to pristine mode
   });