Use id in aura:iteration for recordEditForm

Question

I have aura:iteration which goes through my custom wrapper class (which contains List of sObjects), and show recordEditFrom for all of them.

My wrapper does not have an Id field.
However, it has a key field (Something like this Port 1, test product ) that is unique.

And I have a custom submit button.

Here is my code :

<aura:component>
<aura:iteration items="{!v.data}" var="item">
    <lightning:recordEditForm aura:id="editForm" recordId="{!item.Id}"
                              objectApiName="Custom_Object__c" 
                              onsubmit="{!c.onRecordSubmit}">
        <lightning:inputField fieldName="Custom_Field__c"/>
        <lightning:button variant="brand" label="Save" aura:Id="!{item.key}" type="submit" />
    </lightning:recordEditForm>
</aura:iteration>
</aura:component>

So my questions are:

Do we have a possibility in the onRecordSubmit check on which button from the aura:iteration list we clicked?

I tried aura:Id, however, it can not be generated here

Any help will be appreciated.

Thank you.

Answer 1

aura:id can't be set dynamically via an expression. It is mentioned in the Component IDs documentation.

aura:id doesn't support expressions. You can only assign literal string values to aura:id.

at the same time, it is not required to be unique across the component. You can set aura:id as a string along with setting a custom data-. Custom data- dataset attribute supports expressions. So it will be storing a unique key for submit button.

Howewer, data- dataset is not supported in lightning:recordEditForm. In this case a workaround whould be to use class attribute, as when you click submit button, source of the event is a form:

<aura:component>
    <aura:iteration items="{!v.data}" var="item">
        <lightning:recordEditForm
                aura:id="editForm"
                recordId="{!item.Id}"
                objectApiName="Custom_Object__c" 
                onsubmit="{!c.onRecordSubmit}"
                class="{!item.key}">
            <lightning:inputField fieldName="Custom_Field__c"/>
            <lightning:button variant="brand" label="Save" type="submit" />
        </lightning:recordEditForm>
    </aura:iteration>
</aura:component>

it is possible to get a source of the event in handler js controller:

onRecordSubmit: function(cmp, event, helper){
    const form = event.getSource();
    console.log('clicked form key: ', form.get('v.class'));
}