在Angular中提交后如何重置表单？

Question

我有一个包含两个字段的表单，我只想在提交表单时更改选项卡，问题是由于页面没有重新加载，表单保持与之前输入的相同。

这是我的表格

<form name="userForm" ng-submit='manageBed.addBed(bedData);'  ng-hide="manageBed.loader">

manageBed 是控制器 尝试过

$scope.userForm.$setPristine(); 并在控制器中清除 bedData this.bedData={}; 会导致所需的字段错误。

this.addBed = function(bedData) {
  Admin.addBed(this.bedData).then(function(data) {
    if (data.data.success) {
      app.loader = true;
      $timeout(function() {
        app.loader = false;
        $scope.myTabIndex = 0;
        Admin.viewBed().then(function(data) {
          if (data.data.success) {
            $scope.beds = data.data.beds;
          } else {
            $scope.nobed = true;
          }
        });
        app.bedData = {};
        $location.path('/admin/managebeds');
      }, 3000);
    } else {
      app.loader = false;
    }
  });
};

Answer 1

如果您使用状态，请在表单提交函数的末尾使用$state.go($state.current,{},{reload:true})。

Answer 2

定义表单$scope.form={}; 在 HTML 中将表单名称更改为 name = 'form.userForm' 并提交成功后

app.bedData ={};
$scope.form.userForm.$setPristine();
$scope.form.userForm.$setUntouched();

这解决了我的问题

Answer 3

请检查相同类型的示例代码到here，并检查角度表单控制器方法到here。

在您的情况下，在您的控制器中使用以下代码，

       $scope.form={}
       var self = this;
       this.addBed = function(bedData) {
          Admin.addBed(this.bedData).then(function(data) {
            if (data.data.success) {
              self.loader = true;
              $timeout(function() {
                self.loader = false;
                $scope.myTabIndex = 0;
                Admin.viewBed().then(function(data) {
                  if (data.data.success) {
                    $scope.beds = data.data.beds;
                  } else {
                    $scope.nobed = true;
                  }
                });

                self.bedData = {};

                $scope.form.userForm.$setPristine();
                $scope.form.userForm.$setUntouched()


                $location.path('/admin/managebeds');
              }, 3000);
            } else {
              self.loader = false;
            }
          });
        };

并在您的模板中添加以下代码，

    <form name="form.userForm" ng-submit='manageBed.addBed(bedData);'  ng-hide="manageBed.loader">

关于角形的更多细节请查看here。

希望对你有帮助！！！