Lightning Web Component - do I need to track changes for every single input field in a form
Since lwc is one-way data binding so if I need to get the current value of the input field I turned out to use event.target.value in the onchange event.
However, if we need to have a form of input fields and only need to collect all of the data at the form submission time, do I still need to add onchange event on every one of the input field at all? Or can I simply collect the information at the submission time?
lightning-web-components
asked 1 hour ago
Lance ShiLance Shi
7,52633077
add a comment |
Since lwc is one-way data binding so if I need to get the current value of the input field I turned out to use event.target.value in the onchange event.
However, if we need to have a form of input fields and only need to collect all of the data at the form submission time, do I still need to add onchange event on every one of the input field at all? Or can I simply collect the information at the submission time?
lightning-web-components
asked 1 hour ago
Lance ShiLance Shi
7,52633077
add a comment |
Since lwc is one-way data binding so if I need to get the current value of the input field I turned out to use event.target.value in the onchange event.
However, if we need to have a form of input fields and only need to collect all of the data at the form submission time, do I still need to add onchange event on every one of the input field at all? Or can I simply collect the information at the submission time?
lightning-web-components
asked 1 hour ago
Lance ShiLance Shi
7,52633077
Since lwc is one-way data binding so if I need to get the current value of the input field I turned out to use event.target.value in the onchange event.
However, if we need to have a form of input fields and only need to collect all of the data at the form submission time, do I still need to add onchange event on every one of the input field at all? Or can I simply collect the information at the submission time?
lightning-web-components
lightning-web-components
asked 1 hour ago
Lance ShiLance Shi
7,52633077
asked 1 hour ago
Lance ShiLance Shi
7,52633077
asked 1 hour ago
Lance ShiLance Shi
7,52633077
asked 1 hour ago
Lance ShiLance Shi
7,52633077
asked 1 hour ago
Lance ShiLance Shi
7,52633077
7,52633077
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
In my opinion, this is more of how you want to implement and most importantly how would you want to interact with the Users filling in the form. Sometimes one over other is just what you need.
do I still need to add onchange event on every one of the input field at all?
Use this approach if you really want to alert the user about any error in the field right away instead of waiting for end.
Or can I simply collect the information at the submission time?
Use this approach if you want to defer the validation until the submission.
answered 1 hour ago
Jayant DasJayant Das
17k21330
add a comment |
I would simply collect all the information on form submission using query selector.
this.template.querySelector('classname'); //use query selector
Note that @track should not be used extensively . It makes less sense to use this decorator if we are not rendering something on the UI .
If there is no client side validations involved on page, there is no need to use change handler on every input .
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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%2fsalesforce.stackexchange.com%2fquestions%2f255251%2flightning-web-component-do-i-need-to-track-changes-for-every-single-input-fiel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
In my opinion, this is more of how you want to implement and most importantly how would you want to interact with the Users filling in the form. Sometimes one over other is just what you need.
do I still need to add onchange event on every one of the input field at all?
Use this approach if you really want to alert the user about any error in the field right away instead of waiting for end.
Or can I simply collect the information at the submission time?
Use this approach if you want to defer the validation until the submission.
answered 1 hour ago
Jayant DasJayant Das
17k21330
add a comment |
In my opinion, this is more of how you want to implement and most importantly how would you want to interact with the Users filling in the form. Sometimes one over other is just what you need.
do I still need to add onchange event on every one of the input field at all?
Use this approach if you really want to alert the user about any error in the field right away instead of waiting for end.
Or can I simply collect the information at the submission time?
Use this approach if you want to defer the validation until the submission.
answered 1 hour ago
Jayant DasJayant Das
17k21330
add a comment |
In my opinion, this is more of how you want to implement and most importantly how would you want to interact with the Users filling in the form. Sometimes one over other is just what you need.
do I still need to add onchange event on every one of the input field at all?
Use this approach if you really want to alert the user about any error in the field right away instead of waiting for end.
Or can I simply collect the information at the submission time?
Use this approach if you want to defer the validation until the submission.
answered 1 hour ago
Jayant DasJayant Das
17k21330
In my opinion, this is more of how you want to implement and most importantly how would you want to interact with the Users filling in the form. Sometimes one over other is just what you need.
do I still need to add onchange event on every one of the input field at all?
Use this approach if you really want to alert the user about any error in the field right away instead of waiting for end.
Or can I simply collect the information at the submission time?
Use this approach if you want to defer the validation until the submission.
answered 1 hour ago
Jayant DasJayant Das
17k21330
answered 1 hour ago
Jayant DasJayant Das
17k21330
answered 1 hour ago
Jayant DasJayant Das
17k21330
answered 1 hour ago
Jayant DasJayant Das
17k21330
17k21330
add a comment |
add a comment |
I would simply collect all the information on form submission using query selector.
this.template.querySelector('classname'); //use query selector
Note that @track should not be used extensively . It makes less sense to use this decorator if we are not rendering something on the UI .
If there is no client side validations involved on page, there is no need to use change handler on every input .
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
add a comment |
I would simply collect all the information on form submission using query selector.
this.template.querySelector('classname'); //use query selector
Note that @track should not be used extensively . It makes less sense to use this decorator if we are not rendering something on the UI .
If there is no client side validations involved on page, there is no need to use change handler on every input .
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
add a comment |
I would simply collect all the information on form submission using query selector.
this.template.querySelector('classname'); //use query selector
Note that @track should not be used extensively . It makes less sense to use this decorator if we are not rendering something on the UI .
If there is no client side validations involved on page, there is no need to use change handler on every input .
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
I would simply collect all the information on form submission using query selector.
this.template.querySelector('classname'); //use query selector
Note that @track should not be used extensively . It makes less sense to use this decorator if we are not rendering something on the UI .
If there is no client side validations involved on page, there is no need to use change handler on every input .
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
edited 1 hour ago
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
answered 1 hour ago
Mohith ShrivastavaMohith Shrivastava
61.5k7105147
61.5k7105147
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
add a comment |
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
So it is pretty much using the traditional jQuery style to get the values by either class or id, is that correct?
– Lance Shi
42 mins ago
add a comment |
Thanks for contributing an answer to Salesforce Stack Exchange!
- 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%2fsalesforce.stackexchange.com%2fquestions%2f255251%2flightning-web-component-do-i-need-to-track-changes-for-every-single-input-fiel%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
