How to submit a lightning:recordEditForm from a button that isn’t nested?

The lightning:recordEditForm documentation provides this example:

<aura:component>
    <lightning:recordEditForm recordId="003XXXXXXXXXXXXXXX" objectApiName="Contact">
        <lightning:messages />
        <lightning:inputField fieldName="FirstName" />
        <lightning:inputField fieldName="LastName" />
        <lightning:inputField fieldName="Email" />
        <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
    </lightning:recordEditForm>
</aura:component>

where a a click on the nested submit button causes the data to be saved.

Anyone know of a reliable/documented way to get the lightning:recordEditForm to save based on a click of a button located elsewhere in the page?

Answer

You can manually trigger the submit action of lightning:recordEditForm component without having to use <lightning:button type="button"/> which can be found in the new component documentation UI : https://<myDomain>/componentReference/suite.app

enter image description here

Sample code:

<lightning:recordEditForm aura:id="editForm" recordId="0032800001DYoc0" objectApiName="Contact">
      <lightning:messages />
      <lightning:inputField fieldName="FirstName" />
      <lightning:inputField fieldName="LastName" />
      <lightning:inputField fieldName="Email" />
</lightning:recordEditForm>
<lightning:button class="slds-m-top_small" variant="brand" type="button" name="update" label="update" onclick="{!c.update}" />

controller:

update : function(component,event,helper) {
   component.find("editForm").submit();
}

Attribution
Source : Link , Question Author : Keith C , Answer Author : Praveen

Leave a Comment