在以下代码中成功提交AngularJS后，如何清空（或重置）表单上的所有输入字段？

Question

我下面有一个控制器代码：

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

所有HTML字段都是输入字段，可以使用$ scope对象进行访问。

我尝试使用$ setPristine，但是没有用。

有人请仅在我的代码中成功提交表单后，帮助我将所有字段设置为空。

谢谢。

Answer 1

如果您想在完成后重设表单，我想您的post请求解决后，您必须手动重设$scope.manageUsers对象：

  $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

您可以在此处使用$setPristine() ：

$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演示。

Answer 3

它应该为您工作。

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