Resetting Record Edit Form In LWC

Hello Trailblazers !!!!

Using Record Edit Form saves a lot of time when we know there are certain fields for insertion of Record for a object. We can also reset the form on click of button as well.

<template>
   <lightning-record-edit-form
       record-id={recordId}
       object-api-name={objectApiName}>
       <lightning-input-field field-name="Name"></lightning-input-field>
       <lightning-input-field field-name="Industry"></lightning-input-field>
       <div class="slds-m-top_medium">
           <lightning-button class="slds-m-top_small" label="Cancel" onclick={allowReset}></lightning-button>
           <lightning-button class="slds-m-top_small" type="submit" label="Save Record"></lightning-button>
       </div>
   </lightning-record-edit-form>

allowReset(event) {
   const inputFields = this.template.querySelectorAll(
       'lightning-input-field'
   );
   if (inputFields) {
       inputFields.forEach(field => {
           field.reset();
       });
   }
}

So this works when we have all input field as ‘lightning-input-field’. In case there is some different input tag used then we can retrieve those differently and can reset them as above .

Hope this helps !!!!!

Happy Reading 🙂