37

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

J. Davidson
  • 3,297
  • 13
  • 54
  • 102

5 Answers5

68

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.

Mohammad Sepahvand
  • 17,364
  • 22
  • 81
  • 122
  • 24
    Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3 – TroodoN-Mike Apr 07 '15 at 03:25
  • clear the form by using `$scope.currentRecord={};` is wrong approach, try to reset the field by using empty works fine. – Snopzer Sep 28 '16 at 12:40
  • @MohammadFareed `currentRecord` was merely used as an example to refer to the current form model, it's not a real object on the `$scope` – Mohammad Sepahvand Sep 29 '16 at 16:34
46

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

Samuel R
  • 609
  • 5
  • 9
  • Can you please tell me why this approach is not working with this approach i.e. I am using this in controller instead of $scope. – Umair Hamid Apr 01 '16 at 07:44
  • Just to clarify. If your controller as an alias (strongly recommended with vm), you can set an attribute like `name='vm.form'` to the form element. An object will then be exposed to your current scope (which is vm). All you got to next is reset `pristine` and `touched` values and reset the `ng-model` of your inputs. – C0ZEN Nov 22 '17 at 20:12
9

This worked for me.

viewModel.data = {};
$scope.formName.$setUntouched();
$scope.formName.$setPristine();
Pete
  • 754
  • 2
  • 13
  • 27
3

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();
Ranger
  • 95
  • 7
1

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">
ValRob
  • 2,584
  • 7
  • 32
  • 40