Question

123

Angularjs form reset

rated 0 times [ 129] [ 6] / answers: 1 / hits: 55377 / 11 Years ago, wed, january 1, 2014, 12:00:00

I have a reset function in angular to clear all the fields in a form. If I do something like:

<a href=# ng-click=resetForm()>reset</a>



$scope.resetForm = function() {

  $scope.someForm = {};

}

Everything works fine. But I want to use this function for multiple forms on the site. If I pass the form object in like:

<a href=# ng-click=resetForm(someForm)>reset</a>



$scope.resetForm = function(form) {

  $scope.form = {};

}

Then it won't work. Can someone explain to me why this would be happening?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brennonr

Add To Favorites

Follow

Total Points: 124

Total Questions: 101

Total Answers: 101

Location: Estonia

Member since Wed, Jun 8, 2022

2 Years ago

answered 11 Years ago marisela · Accepted Answer

You have 2 problems:

You're not accessing the passed in variable, still access the someForm of current scope.

When you pass parameter to the function, it's passed by reference. Even when you use form = {}, it does not work because it only changes the reference of the parameter, not the reference of the passed in someForm.

Try:

$scope.resetForm = function(form) {

  //Even when you use form = {} it does not work

  form.fieldA = null;

  form.fieldB = null;

  ///more fields

}

Or

$scope.resetForm = function(form) {

      //Even when you use form = {} it does not work

      angular.copy({},form);

    }

instead of:

$scope.resetForm = function(form) {

  $scope.form = {};

}

In your plunk, I see that you're not separating the view from the model. You should do it for separation of concerns and to avoid problems that might happen when you clear all the fields (including DOM form object's fields).

<form name=form2 ng-controller=SecondController>

      <label for=first_field>First Field</label>

      <input ng-model=form2Model.first_field />

      <br />

      <label for=second_field>Second Field</label>

      <input ng-model=form2Model.second_field />

      <br />



      <a href=# ng-click=secondReset(form2Model)>Reset the form</a>

    </form>

http://plnkr.co/edit/x4JAeXra1bP4cQjIBld0?p=preview