lightning-record-form in an aura parent component "Save and Next" button. How to set mode and clear record?

Question

I have a lightning-record-form LWC component wrapped in an aura parent component so I can use it as a button on my Quote records. The lightning-record-form comes with cancel and save buttons for free but I want to add a "Save and Next" button to save the current record and then re-load the modal to allow entering a new record. I have found the e.force:refreshView that resets the modal but it goes into "view" mode instead of "edit" and the original record remains populated in the modal dialog. I'm kind of stumped at this point on how I can a) clear the current record, and b) set the modal to edit mode. I'll admit to not being an expert here so any other suggestions people have with my code I am open to critics!

Aura component:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickActionWithoutHeader">
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
            <c:newProductAddToQuoteLineModal recordId="{!v.recordId}" onclose="{!c.closeQA}"/>
        </div>
    </section>
</aura:component>

Aura controller:

({
    closeQA : function(component, event, helper) {
        console.log('sending e.force:closeQuickAction');
        $A.get("e.force:closeQuickAction").fire();
        $A.get('e.force:refreshView').fire();
    }, 
    refreshView : function(component, event, helper) {
        $A.get("e.force:refreshView").fire();
    }
}) 

lightning-web-component:

<template>
    <h1>Create New Product and add to a New Quote Line</h1>
    <div>
        <lightning-record-form
            object-api-name="Product2"
            fields={fields}
            columns="1"
            mode={editMode}
            onsubmit={handleSubmit}
            onsuccess={handleSuccess}
            oncancel={handleCancel}
            density="comfy">
        </lightning-record-form>
        <lightning-button type="submit" variant="brand" label="Save & Add New" onclick={handleSubmitAndNext} value="saveandnew">
        </lightning-button>
    </div>
</template>

Lightning-web-component javascript:

import { LightningElement,api,track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import addNewQuoteLineItem from '@salesforce/apex/NewProductAddToQuoteLineHelper.addNewQuoteLineItem';
import getFieldSetMembers from '@salesforce/apex/NewProductAddToQuoteLineHelper.getFieldSetMembers';

export default class NewProductAddToQuoteLineModal extends LightningElement {
    @api recordId;
    @track saveAndNext = false;
    @track editMode = "edit";

    fields = [];

    /* javaScipt functions start */ 
    connectedCallback() {
        console.log('recordId: ' + this.recordId);
        getFieldSetMembers().then(
            result => {
                console.log('got fields: ' + result);
                this.fields = [];
                var array = result.split(',');
                for(let i = 0; i < array.length; i++){ 
                    this.fields.push({fieldApiName: array[i], objectApiName: "Product2"});
                }
        }).catch(error => {
            console.log('error is: ' + error);
            const event = new ShowToastEvent({
                title: 'Error reading fields for Product',
                message: error ? error : 'Unknown',
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(event);
        });
    }
 
    closeModal() {
        console.log('closing the model now');
        
        const closeQA = new CustomEvent('close');
        this.dispatchEvent(closeQA);
    }

    refreshModal() {
        console.log('refreshing modal');
        const refreshModal = new CustomEvent('refreshView');
        this.dispatchEvent(refreshModal);
    }

    handleCancel(event) {
        console.log('handling cancel now');
        this.closeModal();
    }

    handleSubmitAndNext(event) {
        this.saveAndNext = true;
        this.handleSubmit(event);
    }

    handleSubmit(event) {
        console.log('handling submit now');
        event.preventDefault();

        // Get data from submitted form
        const rfields = event.detail.fields;

        // You need to submit the form after modifications
        this.template
            .querySelector('lightning-record-form').submit(rfields);
    }

    handleSuccess(event) {
        console.log('handling success');
        addNewQuoteLineItem({ quoteId: this.recordId, 
                              productId: event.detail.id })
            .then(
                result => {
                    console.log('result is: ' + result);
                    console.log('saveAndNext is: ' + this.saveAndNext);
                    if (this.saveAndNext) {
                        console.log('calling reset');
                        this.saveAndNext = false;
                        this.handleReset(event);
                        this.refreshModal();
                    } else {
                        this.closeModal();
                    }
                }
            ).catch(
                error => {
                    this.closeModal();
                    console.log('error is: ' + error);
                    this.dispatchEvent(new ShowToastEvent({
                            title: 'Error creating a new Quote Line',
                            message: 'Something went wrong.',
                            variant: error ? error : 'Unknown',
                            mode: 'dismissable'
                        })
                    );
                }
            );
    }

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

    handleError(event) {
        console.log('handling error now');
        this.closeModal();
        this.dispatchEvent(event);
    }

    /* javaScipt functions end */ 
}

Answer 1

In order to obtain a new blank form, you have to overwrite recordId and mode. Just replace these lines at handleReset method:

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