Submit button in LWC for submitting fields from Various objects

Question

I have a requirement and i am stuck with it.

Description: I have to create a Custom LWC form where the form should contain fields from various objects using lightning-edit-record-form but i need a single SUBMIT BUTTON with which i can submit a record. For example, using lightning-edit-record-form i will get Account name,Account number fields from account Object, Email fields from Contact Object in the form and i need a single SUBMIT button to submit the form.

My Question: How can i submit records of various objects with a single SUBMIT button?

Answer 1

One way is to include a hidden submit button inside each form:

<lightning-button class="slds-hide" type="submit"></lightning-button>

and then have a single visible button:

<lightning-button label="Submit" onclick={submitForms}></lightning-button>

that submits all the forms:

submitForms() {
    const forms = this.template.querySelectorAll('lightning-edit-record-form');
    for (const form of forms) form.submit();
}

but this gets a bit more complicated if you need to handle form submit errors.