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

时间:2018-02-05 05:00:13

标签: angularjs forms

我有两个字段表单,我想在提交表单时更改选项卡,问题是因为页面没有重新加载表单保持与先前输入的相同。

这是我的表格

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

3 个答案:

答案 0 :(得分:0)

请检查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

希望这会对你有帮助!!!

答案 1 :(得分:0)

如果您使用状态,请在表单提交功能结束时使用$state.go($state.current,{},{reload:true})

答案 2 :(得分:0)

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

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

这解决了我的问题