How to programmatically submit a lightning-record-edit-form?

Salesforce Asked by Keith C on December 1, 2020

The lightning-record-edit-form has a documented submit method that I assume can produce similar behavior to a click on a nested submit button. But I can’t find any examples of this.

The documentation describes a fields argument for the submit method of:

Submits the form using an array of record fields or field IDs. The
field ID is provisioned from @salesforce/schema/. Invoke this method
only after the load event.

When no argument is supplied to submit, features like required field validation does not work. I’m not in a position to test right now so am wondering:

  • If the fields are hard-coded as the submit argument, does the expected behavior result?
  • Can the field names specified in the nested lightning-input-field elements be programmatically obtained? (I note that lightning-record-edit-form has a field-names property but that is documented as “Reserved for internal use. Names of the fields to include in the form.”.)

2 Answers

I have run into this often since moving from Aura to lightning web components (LWC) and have found that the only solution is to hide a submit button on the form, and then call click on it from your JS method when desired.

A very basic example of this would look like this:


   <lightning-spinner if:false={rendered} 
                     size="small" >
   <template if:true={rendered}>
       <lightning-record-edit-form onsubmit={handleSubmit}
                                   object-api-name="Account" >
            <lightning-input-field field-name="Name" ></lightning-input-field>
            <input type="submit" class="hidden" />
        <lightning-button onclick={submitMyformProgramatically} 
                          label="Click me" >


import { LightningElement, track} from 'lwc';

export default class App extends LightningElement {

  rendered = false;

     this.rendered = true;

     const btn = this.template.querySelector( ".hidden" );

     if( btn ){;

  handleFormSubmit( event ){
     const fields = event.detail.fields;
     console.log( "Fields: ", fields );



.hidden {
    display: none;

in this example, a simple click of the external button will submit this form programatically by locating the button on the form and clicking it.

In Aura lightning:recordEditform, you used to be able to set an aura:id on the form and simply call submit from your JS, but that doesn't work in the new LWC lightning-record-edit-form

Correct answer by Ronnie on December 1, 2020

You can call the submit method of the record-edit-form component directly. It is much cleaner than hiding a button.


Answered by CyberJus on December 1, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP