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!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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();

    })

Method 2

There is a trick which is very much hidden in the documentation highlighted by @glls already in the answer.

Here is what the documentation says:
Multiple lightning:recordEditForm

So we can handle this with concat method of array:

var editForms = c.find('editForm');
var forms = [].concat(editForms || []);
/* Now here the forms will always be an array, and won't break your code anymore. */

forms.forEach((form)=>{ 
    form.submit();
});


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x