Reset Lightning-record-form after creating new record

Question

I'm new to LWC. I want to know that how can I reset the lightning-record-form after saving a record.

File: contactCreator.html

    <template>
    <lightning-card title="Contact Creator">    
      <div class="slds-m-around_medium">
        <lightning-record-form object-api-name={objectApiName} fields={fields} oncancel={handleReset} onsuccess={handleSuccess}>
        </lightning-record-form>
      </div>
    </lightning-card> 
  </template>

File: contactCreator.js

import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL from '@salesforce/schema/Contact.Email';

export default class ContactCreator extends LightningElement {

  objectApiName = CONTACT_OBJECT;
  fields = [FIRST_NAME_FIELD,LAST_NAME_FIELD,EMAIL];

  handleSuccess(event){
    const toastEvent = new ShowToastEvent({
      title:"Contact Created - Success",
      message : "Record ID: "+ event.detail.id,
      variant:"success"
    });
    this.dispatchEvent(toastEvent);
  }
}

I want my component like this after saving

---

IGNORE NEW BUTTON IN IMAGE

---

I'm getting this after saving.

Answer 1

In record creation, on success the property recordId is setted in order to reference the new object, that's why you see your data.
In order to obtain a new blank form, you have to overwrite that value.
Just add these two lines at the end of your handleSuccess method:

const editForm = this.template.querySelector('lightning-record-form');
editForm.recordId = null;

It should look like this:

handleSuccess(event) {
    const toastEvent = new ShowToastEvent({
        title: "Contact created",
        message: "Record ID: " + event.detail.id,
        variant: "success"
    });
    this.dispatchEvent(toastEvent);
    const editForm = this.template.querySelector('lightning-record-form');
    editForm.recordId = null;
}