CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
J. Davidson
J. Davidson

Reputation: 3307

Resetting form after submit in Angularjs

Hi I have a form which does update on button click. 

 $scope.action = "Update";
  var id = $routeParams.editId;
  scope.item = updateRecord.get({ id: id });

Once the item is updated it doesn't remove the entered information in the form fields. I was wondering what is available in angularjs to add in the above code after udpating so that it also clears to form. Thanks

Upvotes: 36

Views: 86931

Answers (5)

ms87
ms87

Reputation: 17492

You can reset a form by, $scope.formName.$setPristine(); but if you're binding a model object to your inputs, you need to take care of clearing those too, ie:

$scope.currentRecord={};

EDIT

As ToodoN-Mike pointed out, don't forget to set

$scope.formName.$setUntouched()

The $touched flag was introduced in angular 1.3.

Upvotes: 68

ValRob
ValRob

Reputation: 2682

I dont get the question, but maybe, you can clean the form in the Html component:

function: ngSubmit(), send the data. taskName is the name of the field, also taskBody.

<form (ngSubmit)="onSubmit(taskName.value, taskBody.value); taskName.value=''; taskBody.value=''" #taskForm="ngForm">

Upvotes: 1

Ranger
Ranger

Reputation: 95

1) To Remove the values in Form Fields and to reset you can use $setPristine();

$scope.formName.$setPristine();

2) Next, to set the form to Untouched State too use $setUntouched();

(If you have required fields in your form Fields and also if you are using ng-messages then if you don't use the below function those fields will show error.)

$scope.formName.$setUntouched();

Upvotes: 3

Pete
Pete

Reputation: 784

This worked for me.

viewModel.data = {};
$scope.formName.$setUntouched();
$scope.formName.$setPristine();

Upvotes: 9

Samuel R
Samuel R

Reputation: 609

At the bottom of your submit function's body run this code below.

// Reset the form model.
vm.project = {};
// Set back to pristine.
vm.form.$setPristine();
// Since Angular 1.3, set back to untouched state.
vm.form.$setUntouched();

"vm.form" is my form name.

For more info have a look at this docs page: https://docs.angularjs.org/api/ng/type/form.FormController

Upvotes: 46

Related Questions