Last Updated on July 7, 2022 by Rakesh Gupta
Big Idea or Enduring Question:
- How to reset the lightning input field to its default value or null?
Objectives:
After reading this blog, you’ll be able to:
- Reset input-field value to its default value
- Reset input-field value to Null
- and much more
In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?!
- How to Implement Conditional Rendering in Lightning Web Component
- Get Information About the logged-In User in Lightning Web Component
- Pass lightning-input field Value from a Button Click to Lightning Web Component Controller
Rachel Gillett is working as a Junior Developer at Gurukul on Cloud (GoC). So far she has created this form and is able to pass user-entered value to LWC javaScript.
Now she wants to add a Cancel button that allows users to reset the field values to their original value, as shown below:
Reset Input-field Value to Null – Using Button Element
If you use an HTML button element within the form to perform an action such as resetting the field values, specify thetype=”reset”. Using type=”reset” on a button deletes the form values and does not preserve the initial values.
<lightning-button
variant=”Neutral”
label=”Cancel”
class=”slds-m-left_x-small”
type=”reset”>
</lightning-button>
This example creates a form with two fields, followed by Cancel and Next buttons. When you click the Cancel button, it reset the values and doesn’t preserve the initial values.
Reset Input-field Value to Null – Using Reset() Method
Lightning web component doesn’t provide its own Cancel and Save. To create your own Cancelbutton that reverts the field values, include a lightning-button component that calls the reset() method.
<lightning-button
variant=”Neutral”
label=”Cancel”
class=”slds-m-left_x-small”
onclick={handleCancel}>
</lightning-button>
import { LightningElement, api } from ‘lwc’;
export default class InputExample extends LightningElement() {
handleCancel(){
this.template.querySelector(‘form’).reset();
}
}
This example creates a form with two fields, followed by Cancel and Next buttons. When you click the Cancel button, the handleCancel method resets the fields to their initial values.
Automation Champion Approach (I-do):
Now you have a basic understanding of all ingredients we need to build the lightning web component for the given business requirement. Let’s get started
lightningInputExample.js-meta.xml
A lightning web component can be used to build custom pages for Lightning Experience and the Salesforce mobile app quickly with point-and-click tools. Make sure to add the right target for it.
This configuration file makes the component available for all Lightning page types but restricts support on desktops.
<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>54.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> </targets></LightningComponentBundle>
lightningInputExample.html
Every UI component must have an HTML file with the root tag<template>. The template contains two lightning-input tags that create input for email and mobile. The template includes twolightning-button.The first button (Next) is used to pass the value to JavaScript Component, whereas the second button (Cancel) is used to reset the input fields.
We will use onchange event and store the values in variables in LWC controller.When a user clicks on the Cancel button, it will call a JavaScript method handleCancel() which will usevariables to reset the email and mobile field values.
<!-- lighntingInputExample.html --><template> <form> <div class="slds-p-top_small slds-p-bottom_medium slds-align_absolute-center slds-theme_default slds-text-heading_medium"> <b>Lightning-Input Example</b></div> <div class="slds-box slds-theme_default"> <lightning-input type="email" label="Email Address" value={emailvalue} onchange={handleEmailChange}> </lightning-input> <lightning-input type="tel" name="mobile" label="Mobile" value={mobilevalue} onchange={handleMobileChange}> </lightning-input> <div class="slds-m-top_small slds-align_absolute-center"> <lightning-button variant="Neutral" label="Cancel" class="slds-m-left_x-small" onclick={handleCancel}> </lightning-button> <lightning-button variant="brand" class="slds-m-left_x-small" label="Next" onclick={handleNext}> </lightning-button> </div> </div> </form></template>lightningInputExample.js
Use variables from the LWC controller to get and set the email and Mobile values when a user clicks on theCancelbutton.
import { LightningElement } from 'lwc';import LightningConfirm from 'lightning/confirm';export default class InputExample extends LightningElement() { emailvalue ="username@example.com"; mobilevalue= "000-000-0000"; handleEmailChange(event){ this.emailvalue = event.target.value; } handleMobileChange(event){ this.mobilevalue = event.target.value; } handleNext() { alert('email '+ this.emailvalue); alert('Mobile '+ this.mobilevalue); } handleCancel(){ this.emailvalue = "username@example.com"; this.mobilevalue = "000-000-0000"; }}Proof of Concept
Formative Assessment:
I want to hear from you!
What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.
