Reset lightning input field on button click in Lightning Web Component : sanketthoughts

Reset lightning input field on button click in Lightning Web Component
by: sanketthoughts
blow post content copied from  Salesforce Diaries
click here to view original post

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 5 input field and 3 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 and Country. The button labels are Reset All, Reset City Field and Reset using data-id.

<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" name="city"></lightning-input>
                        <lightning-input type="text" label="Country"></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>
                </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
• handleResetCityField – This method reset field where name is city
• handleResetUsingDataId – This method access the lightning field where data-id attribute equals to reset

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  handleResetAll(){
    this.template.querySelectorAll('lightning-input').forEach(element => {
      element.value = undefined;
    });
  }
  handleResetCityField(){
    this.template.querySelectorAll('lightning-input').forEach(element => {
      if(element.name==="city"){
        element.value = undefined;
      }      
    });    
  }
  handleResetUsingDataId(event){
    this.template.querySelectorAll('lightning-input[data-id="reset"]').forEach(element => {
      element.value = undefined;
    });
  }

}

Demo

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

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

The post Reset lightning input field on button click in Lightning Web Component appeared first on Salesforce Diaries.

December 25, 2020 at 04:32PM
Click here for more details...

=============================
The original post is available in Salesforce Diaries by sanketthoughts
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================