Submit Button Not Working When Placed Outside Lightning-Record-Edit-Form Tag in Salesforce LWC

Question

In my sample LWC page, I replicated the standard Edit button in Case object, then placed it inside a modal. Record update working so far, but I notice that footer containing Cancel and Save buttons are not fixed. Every time I scroll the custom form, footer also moves with it which is kind of weird.

I placed the footer outside lightning-record-edit-form but Save button is no longer working. I tried to put it back again inside the tag, and it works. Looks like it works only inside it. I really want to maximize update feature of lightning-record-edit-form.

Is there any way wherein I can place it inside lightning-record-edit-form and still achieve a fixed modal footer?

html file

<template>

    <div class="slds-theme_default">
    <template if:true={displayModal}>  
    <div class="edit-modal" style="height: 640px;">  
    <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 slds-modal_medium">      
    <div class="slds-modal__container"> 
    <header class="slds-modal__header">
        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
            <lightning-icon icon-name="utility:close" size="medium"></lightning-icon>
            <span class="slds-assistive-text">Close</span>
        </button>
        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">edit record</h2>
    </header>        
    <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
        <lightning-record-edit-form object-api-name="Case" 
                                    onsuccess={handleSuccess}
                                    record-id={recordId}>

           
            <div class="slds-grid slds-wrap"> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="AccountId"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2"> 
                    <lightning-input-field field-name="Status"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Type"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Origin"> 
                    </lightning-input-field> 
                </div>
                //....and other fields...didn't include, quite long

            </div>      
            <lightning-button class="slds-var-m-top_small" 
                              type="submit" 
                              label="Update"> 
                            </lightning-button>                           

        </lightning-record-edit-form>
    </div>
    </div>    
    </section>    
    </div>
    </template>    
    </div>
</template>

js file

import { LightningElement, track, api } from 'lwc'; 
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
export default class CaseEditPage extends LightningElement { 
 
    @api recordId; 
    @track displayModal = true; 

    handleSuccess( event ) { 
         
        const toastEvent = new ShowToastEvent({ 
            title: 'Case Updated', 
            message: 'Case Updated Successfully!!!', 
            variant: 'success' 
        }); 
        this.dispatchEvent( toastEvent ); 
 
    }

}

Answer 1

If you want to submit the form by using button outside the form, You can do it using a onclick handler.

handleSubmitButtonClick(){       
   this.template.querySelector('lightning-record-edit-form').submit();
}

handleSubmitButtonClick is your onclick handler of the button:-

<lightning-button class="slds-var-m-top_small" 
                              onclick={handleSubmitButtonClick} 
                              label="Update"> 
                            </lightning-button>