Is it possible to mass-save many lightning:recordEditForms with only ONE button?

Question

Im implementing an line item editor for the "Order" SObject and want give lightning:recordEditForm with lightning:inputField a try for this.

What I have so far is an edit for the order combined with an iteration over the line-items which works as expected:

<aura:attribute name="Order"        type="SObject"          default="{}" />
<aura:attribute name="OrderId"      type="String"    />
<aura:attribute name="Items"        type="SObject[]"        default="[]" />
<aura:if isTrue="{! !empty(v.ParentType) }">
    <lightning:recordEditForm recordId="{!v.OrderId}" objectApiName="Order">
        <lightning:messages />
        <lightning:inputField fieldName="Name" />
        <lightning:button class="elfOrderSaveButton slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
    </lightning:recordEditForm>
    <aura:iteration items="{!v.Items}" var="item">
        <div>{!item.PricebookEntry.Name}({!item.Id})</div>
        <lightning:recordEditForm recordId="{!item.Id}" objectApiName="OrderItem">
            <lightning:messages />
            <lightning:inputField fieldName="Quantity" />
            <lightning:inputField fieldName="UnitPrice" />
            <lightning:inputField fieldName="TotalPrice" />
            <lightning:inputField fieldName="Description" />
            <div class="elfItemSaveButtonWrapper">
                <lightning:button class="elfItemSaveButton slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
            </div>
        </lightning:recordEditForm>
    </aura:iteration>   
</aura:if>

This looks like

Now I don't want each line item to have it's own save-button but instead only ONE master-button which saves all the items at once.

I've tried

<lightning:button class="slds-m-top_small" label="SAVE"     onclick="{! c.saveAll }"/>  

and in the controller

saveAll         : function(cmp, evt, hlp) { 
    $('.elfItemSaveButton').click();        
},

Excuse my jquery - without the outcome would be the same: thanks to LockerService, I can't trigger the click-event on the buttons remotely (the are not available in the secure DOM).

Is there a way to submit the lightning:recordEditForm without using the button on the form itself but form the "outside"?

One approach would be to implement the jquery click in a child-compo with api < 39 to bypass LockerService but I'm wondering if this could be done in a less dramatic way?

Any ideas?

Answer 1

You can submit a lightning:recordEditForm programmatically. You can do so by retrieving the component via it's aura:id and calling the submit method.

e.g.

component.find('editForm').submit()

Here are the supporting docs

Since you are using the forms in an iteration, you can give them all the same aura:id and your component.find call will return an array as opposed to an individual component.

Beware, in my experience, submitting the form this way does NOT fire an onsubmit handler if you have one defined.