I've created a lightning record edit form that should create a brand new account record. I have a onsuccess={handleSuccess} and onerror={handleError} defined, but when pressing save the record is not created and there are no error.

Everything looks like it should work to me but cant spot the problem or find a workaround.

I get the layout information via the onload. Then loop over the data to display the fields and sections that I wish to display.

Heres the code:


    <div class="slds-card">
        <div class ="slds-m-around_large">

            <lightning-accordion allow-multiple-sections-open="true" active-section-name={activeSectionNames}>
                <lightning-record-edit-form object-api-name="Account" 

                       <template if:true={uiRecordToDisplay}> 
                            <lightning-layout multiple-rows="true">
                                <lightning-layout-item size="12">
                                    <template for:each={uiRecordToDisplay} for:item="section">
                                        <template if:true={section.showSection}> 
                                            <lightning-accordion-section key={section.id} name={section.id} label={section.heading}>
                                                <lightning-layout multiple-rows="true">
                                                    <template for:each={section.layoutRows} for:item="layoutRow">
                                                        <template for:each={layoutRow.layoutItems} for:item="layoutItem">
                                                            <template for:each={layoutItem.layoutComponents} for:item="layoutComponent">
                                                               <template if:true={layoutComponent.showField}>  
                                                                    <lightning-layout-item key={layoutComponent.apiName} size="6" padding="horizontal-small">
                                                                        <lightning-input-field field-name={layoutComponent.apiName} required={layoutItem.required}></lightning-input-field>
            <footer class="slds-card__footer">
                <div class="slds-align_absolute-center">  
                    <lightning-button class="slds-p-left_small" label="Cancel" title="Cancel" onclick={handleEditClickCancel} ></lightning-button>  
                    <lightning-button class="slds-p-left_small" variant="brand" label="Save" title="Save" type="submit" onclick={handleSuccess}> </lightning-button>


import { LightningElement } from 'lwc';

export default class RecordEditFormCreateRecord extends LightningElement {

    activeSectionNames = []; 

    handleLoad(event) {
        console.log('Layout => ', JSON.stringify(event.detail.layout));

        let layoutParse = JSON.parse(JSON.stringify( Object.values(event.detail.layout.sections)));
        console.log('*** layoutParse *** ', layoutParse);

        this.uiRecordToDisplay = Object.values(layoutParse);
        console.log('*** this.uiRecordToDisplay *** ', this.uiRecordToDisplay);

        // Get the Section headers from the layout. Populate activeSectionNames so the accordion will have the tabs open when it loads.
        for(const tabs of layoutParse){
        console.log('*** this.activeSectionNames *** ', this.activeSectionNames); 


        let forData = this.uiRecordToDisplay
        console.log('*** START showRow *** ');
        console.log('*** this.uiRecordToDisplay *** ', this.uiRecordToDisplay);
        console.log('*** forData *** ', forData);

        for(const sec of forData) {
            sec.showSection = false;
            for(const lr of Object.values(sec.layoutRows)) {
                for(const li of Object.values(lr.layoutItems)) {

                    for(const l of Object.values(li.layoutComponents)) {
                            l.showField = true;
                            sec.showSection = true;

        // reset the uiRecordView and Edit with the updated array information 
        this.uiRecordToDisplay = forData;
        console.log('*** END showRow *** ', this.uiRecordToDisplay); 

        console.info("START handleSuccess");
        this.createdRecordId = event.detail.id;
        console.info("END handleSuccess < ", event.detail.id, " >");

        console.info("START handleError");

        const updatedRecordError = event.detail;

        console.info("END handleError < ", event.detail, " >");

1 Answer 1


I haven't tested this but I think it's because:

  1. Your buttons are outside of your record-edit-from tags
  2. Your buttons have their own onclick attributes. The record-edit-form already has those attributies and those are enough.

With some luck changing that will solve your problem

  • Thanks for pointing that out. I've put that inside the tags and its working Feb 26, 2022 at 11:38
  • @StevenHodge Happy to help, glad it works now
    – Kasper
    Feb 26, 2022 at 23:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .