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?!

Business Use case

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 the type=”reset”. Using type=”reset” on a button deletes the form values and does not preserve the initial values.

Copy Code


<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 Cancel button that reverts the field values, include a lightning-button component that calls the reset() method.

Copy Code


<lightning-button
   variant=”Neutral”
   label=”Cancel”
   class=”slds-m-left_x-small”
   onclick={handleCancel}>

</lightning-button>

Copy Code


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.

Copy Code


<?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 two lightning-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 use variables to reset the email and mobile field values.

Copy Code


<!-- 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 the Cancel button.

Copy Code


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.