How to reset form after submission in Angular?

Question

I have a two field form and i want to just change the tab while submission of form and the problem is since the page is not reloading the form remains as same as previously entered.

Here is my form

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

manageBed is the controller tried with

$scope.userForm.$setPristine(); and also clearing bedData this.bedData={}; in controller gives that required field error.

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

Please do check https://stackoverflow.com/questions/47825651/angularjs-setprestine-not-working-consistently/47826579#47826579 — Santosh Shinde, Feb 05 '18 at 05:04
Can you please add your controller code for submit and reset ? — Santosh Shinde, Feb 05 '18 at 05:11
`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; } }); };` — Rahul Unnikrishnan, Feb 05 '18 at 05:19
Why are you using app 'app.bedData' and where it is defined ? — Santosh Shinde, Feb 05 '18 at 05:30

Santosh Shinde · Answer 1 · 2018-02-05T06:24:51.873

0

Please check the same type of example code to here and check angular form controller methods to here.

And in your case use following code in your controller,

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

And in your template add following code,

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

Please check more details about the angular form to here.

Hope this will help you !!!

edited Feb 05 '18 at 06:24

answered Feb 05 '18 at 05:28

Santosh Shinde

6,045
7
44
68

`self.bedData = {};` will make the field reset but the problem is there will be required field error message – Rahul Unnikrishnan Feb 05 '18 at 05:35
Use self.userForm.$setPristine(); in your controller code after reset the bedData – Santosh Shinde Feb 05 '18 at 05:50
angular.js:14700 TypeError: Cannot read property '$setPristine' of undefined – Rahul Unnikrishnan Feb 05 '18 at 05:54
Use $scope in placed of self – Santosh Shinde Feb 05 '18 at 05:59
1

Please check answer need to pass userForm instance to submit method – Santosh Shinde Feb 05 '18 at 06:17
Solved it by passing it, actually what i needed is $setUntouched() function thanks for the help – Rahul Unnikrishnan Feb 05 '18 at 06:19

score 0 · Answer 2 · edited Feb 05 '18 at 06:04

0

if you are using states then use $state.go($state.current,{},{reload:true}) at the end of the form submit function.

edited Feb 05 '18 at 06:04

Mark Schultheiss

32,614
12
69
100

answered Feb 05 '18 at 05:39

theSOer

23
5

Solved it using `$setUntouched();` thanks for the help – Rahul Unnikrishnan Feb 05 '18 at 06:20

score 0 · Answer 3 · answered Feb 05 '18 at 06:22

0

define form $scope.form={}; change form name to name = 'form.userForm' in HTML and after successfull submission

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

this solved my issue

answered Feb 05 '18 at 06:22

Rahul Unnikrishnan

69
2
11

How to reset form after submission in Angular?

3 Answers3