Creating record via lightning-record-edit-form. Record not saving and no errors

Question

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:

.html

<template>
    <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" 
                                            onload={handleLoad} 
                                            record-type-id="0122z000000hzHuAAI" 
                                            onsuccess={handleSuccess} 
                                            onerror={handleError}>
                    <lightning-messages></lightning-messages>                    

                       <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>
                                                                    </lightning-layout-item>
                                                                </template> 
                                                            </template>
                                                        </template>
                                                    </template>
                                                </lightning-layout>
                                            </lightning-accordion-section>
                                        </template> 
                                    </template>
                                </lightning-layout-item>
                            </lightning-layout>
                        </template> 
                     
                </lightning-record-edit-form>
            </lightning-accordion> 
        
            <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>
                </div>
            </footer>
        </div>
    </div>
</template>

.js

import { LightningElement } from 'lwc';

export default class RecordEditFormCreateRecord extends LightningElement {

    uiRecordToDisplay;
    showSections;
    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){
            this.activeSectionNames.push(tabs.id);
        } 
        console.log('*** this.activeSectionNames *** ', this.activeSectionNames); 

        this.showRow();    
    }

    showRow(){
        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); 
    }

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

    handleError(event){
        console.info("START handleError");

        const updatedRecordError = event.detail;

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

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