Custom Submit Button for a lightning:recordeditform

Biswajeet   June 16, 2019   4 Comments on Custom Submit Button for a lightning:recordeditform

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Account" aura:id="accForm">
            <lightning:messages />
            <lightning:inputField fieldName="Name"/>
            <lightning:inputField fieldName="AccountNumber"/>
            <lightning:inputField fieldName="Industry"/>
            <lightning:inputField fieldName="Phone" />
            <lightning:inputField fieldName="Website" />
        </lightning:recordEditForm>
        <lightning:button variant="brand" type="button" name="Save" label="Save" onclick="{!c.handleCreateAccount}" />
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleCreateAccount : function(component, event, helper) {
        component.find("accForm").submit();
    }
})

  • Mayank Pegwar

    Hi Biswajeet,

    This is awesome solution, but I would like to know that if on click of submit, we want to know the record id which has been created for this action. is there a way to do it?

  • Puneet Mehta

    Hi Biswajeet,

    Very helpful post. Just one query, what if we have to prepopulate a certain field before submitting the form?

    var fields = event.getParam(‘fields’);
    fields.Street = ’32 Prince Street’;”

    The above code doesn’t work.

    Thank you.