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
javascript angularjs angularjs-directive
asked Feb 5 '14 at 7:42
J. Davidson
1,692124369
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 });
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
javascript angularjs angularjs-directive
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 });
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
javascript angularjs angularjs-directive
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 });
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
javascript angularjs angularjs-directive
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,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
1
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.
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
@MohammadFareedcurrentRecordwas 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
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 likename='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 resetpristineandtouchedvalues and reset theng-modelof 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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
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.
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
@MohammadFareedcurrentRecordwas 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.
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
@MohammadFareedcurrentRecordwas 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.
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.
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
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
@MohammadFareedcurrentRecordwas 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
@MohammadFareedcurrentRecordwas 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
yes. this is correct. that's the only way to do it
– Shibbir Ahmed
Feb 5 '14 at 7:53
24
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
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
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
@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
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 likename='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 resetpristineandtouchedvalues and reset theng-modelof 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
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 likename='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 resetpristineandtouchedvalues and reset theng-modelof 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
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
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
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 likename='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 resetpristineandtouchedvalues and reset theng-modelof 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 likename='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 resetpristineandtouchedvalues and reset theng-modelof 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
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
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
3531421
add a comment |
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
607
add a comment |
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
3801423
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
possible duplicate: stackoverflow.com/questions/14684877/…
– Maxim Shoustin
Feb 5 '14 at 7:46