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

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

1

possible duplicate: stackoverflow.com/questions/14684877/…
– Maxim Shoustin
Feb 5 '14 at 7:46

add a comment |

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

 $scope.action = "Update";

  var id = $routeParams.editId;

  scope.item = updateRecord.get({ id: id });

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

1

possible duplicate: stackoverflow.com/questions/14684877/…
– Maxim Shoustin
Feb 5 '14 at 7:46

add a comment |

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

 $scope.action = "Update";

  var id = $routeParams.editId;

  scope.item = updateRecord.get({ id: id });

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

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

 $scope.action = "Update";

  var id = $routeParams.editId;

  scope.item = updateRecord.get({ id: id });

javascript angularjs angularjs-directive

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

asked Feb 5 '14 at 7:42

J. Davidson

1,692124369

1

possible duplicate: stackoverflow.com/questions/14684877/…
– Maxim Shoustin
Feb 5 '14 at 7:46

add a comment |

1

possible duplicate: stackoverflow.com/questions/14684877/…
– Maxim Shoustin
Feb 5 '14 at 7:46

possible duplicate: stackoverflow.com/questions/14684877/…
– Maxim Shoustin
Feb 5 '14 at 7:46

add a comment |

5 Answers
5

active

oldest

votes

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.

edited Nov 20 at 5:55

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53

24

Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3
– TroodoN-Mike
Apr 7 '15 at 3:25

clear the form by using $scope.currentRecord={}; is wrong approach, try to reset the field by using empty works fine.
– Mohammad Fareed
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

add a comment |

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

edited Oct 17 '15 at 15:15

answered Aug 6 '15 at 17:28

Samuel R

49148

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 1 '16 at 7: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

add a comment |

This worked for me.

viewModel.data = {};

$scope.formName.$setUntouched();

$scope.formName.$setPristine();

answered Jul 27 '16 at 14:56

Pete

3531421

add a comment |

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

answered Nov 21 '17 at 17:49

Ranger

607

add a comment |

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">

answered Dec 20 '17 at 11:48

ValRob

3801423

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21571370%2fresetting-form-after-submit-in-angularjs%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

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.

edited Nov 20 at 5:55

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53

24

Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3
– TroodoN-Mike
Apr 7 '15 at 3:25

clear the form by using $scope.currentRecord={}; is wrong approach, try to reset the field by using empty works fine.
– Mohammad Fareed
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

add a comment |

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.

edited Nov 20 at 5:55

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53

24

Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3
– TroodoN-Mike
Apr 7 '15 at 3:25

clear the form by using $scope.currentRecord={}; is wrong approach, try to reset the field by using empty works fine.
– Mohammad Fareed
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

add a comment |

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.

edited Nov 20 at 5:55

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

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.

edited Nov 20 at 5:55

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

edited Nov 20 at 5:55

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

answered Feb 5 '14 at 7:44

Mohammad Sepahvand

13.7k1771106

yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53

24

Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3
– TroodoN-Mike
Apr 7 '15 at 3:25

clear the form by using $scope.currentRecord={}; is wrong approach, try to reset the field by using empty works fine.
– Mohammad Fareed
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

add a comment |

yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53

24

Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3
– TroodoN-Mike
Apr 7 '15 at 3:25

clear the form by using $scope.currentRecord={}; is wrong approach, try to reset the field by using empty works fine.
– Mohammad Fareed
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

yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53

Don't forget to use $scope.formName.$setUntouched() -> $touched flag was introduced in angular 1.3
– TroodoN-Mike
Apr 7 '15 at 3:25

clear the form by using $scope.currentRecord={}; is wrong approach, try to reset the field by using empty works fine.
– Mohammad Fareed
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

add a comment |

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

edited Oct 17 '15 at 15:15

answered Aug 6 '15 at 17:28

Samuel R

49148

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 1 '16 at 7: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

add a comment |

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

edited Oct 17 '15 at 15:15

answered Aug 6 '15 at 17:28

Samuel R

49148

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 1 '16 at 7: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

add a comment |

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

edited Oct 17 '15 at 15:15

answered Aug 6 '15 at 17:28

Samuel R

49148

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

edited Oct 17 '15 at 15:15

answered Aug 6 '15 at 17:28

Samuel R

49148

edited Oct 17 '15 at 15:15

answered Aug 6 '15 at 17:28

Samuel R

49148

answered Aug 6 '15 at 17:28

Samuel R

49148

answered Aug 6 '15 at 17:28

Samuel R

49148

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 1 '16 at 7: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

add a comment |

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 1 '16 at 7: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

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 1 '16 at 7: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

add a comment |

This worked for me.

viewModel.data = {};

$scope.formName.$setUntouched();

$scope.formName.$setPristine();

answered Jul 27 '16 at 14:56

Pete

3531421

add a comment |

This worked for me.

viewModel.data = {};

$scope.formName.$setUntouched();

$scope.formName.$setPristine();

answered Jul 27 '16 at 14:56

Pete

3531421

add a comment |

This worked for me.

viewModel.data = {};

$scope.formName.$setUntouched();

$scope.formName.$setPristine();

answered Jul 27 '16 at 14:56

Pete

3531421

This worked for me.

viewModel.data = {};

$scope.formName.$setUntouched();

$scope.formName.$setPristine();

answered Jul 27 '16 at 14:56

Pete

3531421

answered Jul 27 '16 at 14:56

Pete

3531421

answered Jul 27 '16 at 14:56

Pete

3531421

answered Jul 27 '16 at 14:56

Pete

3531421

add a comment |

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

answered Nov 21 '17 at 17:49

Ranger

607

add a comment |

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

answered Nov 21 '17 at 17:49

Ranger

607

add a comment |

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

answered Nov 21 '17 at 17:49

Ranger

607

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

answered Nov 21 '17 at 17:49

Ranger

607

answered Nov 21 '17 at 17:49

Ranger

607

answered Nov 21 '17 at 17:49

Ranger

607

answered Nov 21 '17 at 17:49

Ranger

607

add a comment |

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">

answered Dec 20 '17 at 11:48

ValRob

3801423

add a comment |

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">

answered Dec 20 '17 at 11:48

ValRob

3801423

add a comment |

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">

answered Dec 20 '17 at 11:48

ValRob

3801423

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">

answered Dec 20 '17 at 11:48

ValRob

3801423

answered Dec 20 '17 at 11:48

ValRob

3801423

answered Dec 20 '17 at 11:48

ValRob

3801423

answered Dec 20 '17 at 11:48

ValRob

3801423

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr