lightning:recordEditForm Multiple Submit Buttons

Question

I have a lightning:recordEditForm that requires two submit buttons. Submit buttons are required rather than using onclick due to submit() not firing the forms onsubmit event. This is required so that I can modify the fields payload.

Is there a way to tell within the onsubmit event which button was clicked?

I've tried the following:

event.getParam("name") - returns undefined

event.getSource().get("v.name") - returns undefined

event.getName() - returns "submit" for both buttons. This makes sense.

event.getSource() - returns something like the below, relying on the number will likely be fragile:

SecureComponentRef: markup://lightning:recordEditForm {1234:0} {recordEditForm}{ key: {"namespace":"c"}

    <lightning:recordEditForm
            aura:id="recordEditForm"
            onload="{!c.handleLoad}"
            onsubmit="{!c.handleSubmit}"
            onsuccess="{!c.handleSuccess}"
            recordId="{!v.RecordId}"
            objectApiName="Account">

        <lightning:messages />

        <lightning:buttonIcon
                              iconName="utility:save"
                              title="APPROVE"
                              name="APPROVE"
                              value="APPROVE"
                              type="submit" />  

        <lightning:buttonIcon iconName="utility:save"
                              title="REJECT"
                              name="REJECT"
                              value="REJECT"
                              type="submit" />

        <lightning:inputField fieldName="Name"/>
        <lightning:inputField fieldName="Phone"/>

    </lightning:recordEditForm>

handleSubmit : function(component, event, helper) {
    console.log("param name "+event.getParam("name")); //undefined
    console.log("source name "+event.getSource().get("v.name")); //undefined
    console.log("param value: "+event.getParam("value")); //undefined
    console.log("getSource "+event.getSource()); //SecureComponentRef: markup://lightning:recordEditForm {1234:0} {recordEditForm}{ key: {"namespace":"c"} }
    console.log("getName "+event.getName()); //Submit
},

Answer 1

All you have to do is add onclick event to your button together with type="submit". The onclick will fire first than the form gets submit. Define an attribute where you can store the button name and get that button name in handlesubmit method.

Aura Markup:-

<aura:attribute type="String" name="buttonlabel"/>
    
    <lightning:recordEditForm  onsubmit="{!c.handleSubmit}" aura:id="myRecordForm"
            objectApiName="Account">

        <lightning:messages />

        <lightning:buttonIcon alternativeText="sach"
                              iconName="utility:save"
                              title="APPROVE"
                              name="APPROVE"
                              value="APPROVE"
                              type="submit"
                              onclick="{!c.Submit1}"/>  

        <lightning:buttonIcon alternativeText="sach"
                              iconName="utility:save"
                              title="REJECT"
                              name="REJECT"
                              value="REJECT"
                              type="submit"
                              onclick="{!c.Submit2}"/>

        <lightning:inputField fieldName="Name"/>
        <lightning:inputField fieldName="Phone"/>

    </lightning:recordEditForm>

JS Controller:-

({
    handleSubmit : function(component, event, helper) {
        event.preventDefault();       // stop the form from submitting
        var button = component.get('v.buttonlabel');        
        var fields = event.getParam('fields');
        if(button === 'button1'){
            fields.Name = '32 Prince Street';
        }else if(button === 'button2'){
            fields.Name = '50 Queen Street';
        }        
        component.find('myRecordForm').submit(fields);
    },
    Submit1 : function(component, event, helper) {
        component.set('v.buttonlabel','button1');
    },
    Submit2 : function(component, event, helper) {
        component.set('v.buttonlabel','button2');
    },
})