[SalesForce] Multiple lightning:recordEditForm

I have a quick way of entering multiple records where user can add rows(record) to add. I am using lightning:recordEditForm component in aura:iteration. When i add multiple rows everything is working just fine. However, when I use only one row to enter it gives me error

$controller$save [component.find(...).forEach is not a function]

This happens only if there is one record to add. Now if I use component.find('editForm'.submit(); I can enter one record but it is not working for multiple records.

My lightning cmp:

<aura:iteration items="{!v.venList}" var="ven" indexVar="index">
                        <tr>
                        <lightning:recordEditForm objectApiName="Vendor_Invoice__c" aura:id="editForm" onsuccess="{!c.handleSuccess}">
                            <lightning:messages />
                            <td>
                                {!index + 1}
                           </td>
                            <td>
                                <lightning:inputField class="slds-size_1-of-12" fieldName="Vendor_Name__c" />
                             </td>
                            <td>
                                <lightning:inputField class="slds-size_2-of-12" fieldName="Name" />
                            </td>
                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="Bill_Cycle__c" />
                             </td>
                            <td>
                                <lightning:inputField class="slds-size_1-of-12" fieldName="Vendor_Customer_Service_Number__c" />
                             </td>
                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="Vendor_Repair_Number__c" />
                             </td>
                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="Last_Download__c" />
                            </td>
                            <td>
                                  <lightning:inputField class="slds-size_1-of-12" fieldName="Initial_Bill_Date__c" />
                            </td>

                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="Online_Access__c" />
                             </td>
                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="X180_Monitored__c" />
                             </td>
                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="Location_Name__c" />
                             </td>
                            <td>
                                 <lightning:inputField class="slds-size_1-of-12" fieldName="Location_Address__c" />
                            </td>
                            <td style="display :none">
                                <lightning:inputField fieldName="Account__c" value="{!v.recordId}"/>
                            </td>
                            <td>
                                <a onclick="{!c.removeRow}" data-record="{!index}">
                                    <lightning:icon iconName="utility:delete" size="small" alternativeText="Delete"/>
                                    <span class="slds-assistive-text">Delete</span>
                                </a>
                            </td> 
                            </lightning:recordEditForm>
                        </tr>
                    </aura:iteration>

Javascript Controller

 save: function(component, event, helper) {

         component.find("editForm").forEach(form => form.submit());  
  }

I have tried the following solutions:
Is it possible to mass-save many lightning:recordEditForms with only ONE button?

Multi Insert with recordEditForm

I cannot understand why it is giving this error. Thanks in advance!

Best Answer

Normally, that happens because forEach is an Array method, hence the error forEach is not a function.

component.find, returns an Array-like collection, but not an array in which you can invoke the forEach method.

find() returns different types depending on the result.

  • If the local ID is unique, find() returns the component.
  • If there are multiple components with the same local ID, find() returns an array of the components.
  • If there is no matching local ID, find() returns undefined.

I went ahead, and added multiple forms on a lgnt component and successfully created multiple records by iterating, I did not however, create my recordEditforms dynamically within an aura iteration.

the only difference I spot at this time are the missing braces in your function:

component.find("editForm").forEach( form =>{
        form.submit();

    })
Related Topic