Reset lightning input field on button click in Lightning Web Component

As per lightning Input documentation, there is no reset method available as part of component. Well, If you are using the lightning input to generate a custom form to allow users to create records or updating it, You might want to give reset option as well on a button click.

Let’s create a Lightning Web Component where we will have multiple lightning input component used inside it. We will also have buttons to reset them.

Generally, Lightning Web Component will have three files. The html, js and meta.xml file. We will use webcomponent.dev to explore the reset functionality on lightning-input field.

app.html

The html file has 6 input field and 4 buttons inside a Lightning card component having title as Reset Input Field and icon name as custom:custom63. Each button is having a onclick handler defined in JavaScript file of the component. The fields label are First Name, Middle Name, last Name, City, Country and Active. The button labels are Reset All, Reset City Field, Reset using data-id and Reset Checkbox.

<template>
	<lightning-card title="Reset Input Field" icon-name="custom:custom63">
		<div class="slds-var-m-around_medium">
			<lightning-input type="text" label="First Name" data-id="reset"></lightning-input>
			<lightning-input type="text" label="Middle Name" data-id="reset"></lightning-input>
			<lightning-input type="text" label="Last Name" data-id="reset"></lightning-input>
			<lightning-input type="text" label="City" data-name="city"></lightning-input>
			<lightning-input type="text" label="Country"></lightning-input>
			<lightning-input type="checkbox" label="Active" data-name="active"></lightning-input>
		</div>
		<div class="slds-var-m-around_medium">
			<lightning-button label="Reset All" onclick={handleResetAll}></lightning-button>
			<lightning-button label="Reset City Field" onclick={handleResetCityField}></lightning-button>
			<lightning-button label="Reset using data-id" data-id="reset" onclick={handleResetUsingDataId}></lightning-button>
			<lightning-button label="Reset Checkbox" data-id="reset" onclick={handleResetCheckbox}></lightning-button>
		</div>
	</lightning-card>
</template>

app.js

The JS file has three methods which will fire on button click. They do use querySelector to access the input field to reset their value.

• handleResetAll – This method access all the input field and make their field value undefined for all the field type except checkbox and checkbox-button. For checkbox and checkbox-button, it sets the checked property as false.
• handleResetCityField – This method reset field where data-name is city
• handleResetUsingDataId – This method access the lightning field where data-id attribute equals to reset
• handleResetCheckbox – This method access the lightning input field where data-name is active and reset it. It set the checked property equals to false instead of making value property as null.

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  handleResetAll(){
    this.template.querySelectorAll('lightning-input').forEach(element => {
      if(element.type === 'checkbox' || element.type === 'checkbox-button'){
        element.checked = false;
      }else{
        element.value = null;
      }      
    });
  }
  handleResetCityField(){
    this.template.querySelector('lightning-input[data-name="city"]').value = null;    
  }
  handleResetUsingDataId(event){
    this.template.querySelectorAll('lightning-input[data-id="reset"]').forEach(element => {
      element.value = null;
    });
  }
  handleResetCheckbox(){
    this.template.querySelector('lightning-input[data-name="active"]').checked = false; 
  }
}

Demo

Go to URL – https://webcomponents.dev/edit/nvF8ikN7CpSZ8NrY8Fog?sv=1 in your browser. You can see the code and play with fields, button and its reset functionality.

You can find more blogs like these here – https://salesforcediaries.com/category/lightning-web-component/