0

I have a lightning component that I am trying to add dynamic rows and delete them and save the records on Submit. I asked this question, and I am able to retrieve picklist values without additional logic for the first row but all the subsequent rows do not have the picklist options at all.

I saw this question too, but that has options added manually, I have a controlling and dependent picklist values that I need on the component.

Component :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="Nigoemailcommunication" >
<aura:attribute name="recordId" type="String" />    
<aura:attribute name="newCar" type="Childcontact__c[]"/>
<aura:attribute name="newCarMap" type ="Map" ></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds-m-around--xx-large">
<div class="slds-float_left slds-p-bottom_small">
    <h1 class="slds-page-header__title">Add Row 
    <lightning:buttonIcon iconName="utility:add"  size="large" variant="bare" alternativeText="Add" onclick="{!c.handleAddcarClick}"/>
</h1>
</div>
<div class="container-fluid">        
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
    <tbody>      
            <lightning:recordEditForm aura:id="CarCreateForm" objectApiName="Childcontact__c" >
                <!--<aura:iteration items="{!v.newCarMap}" var="acc" indexVar="index">-->
                <aura:iteration items="{!v.newCar}" var="acc" indexVar="index">
            <tr>
                <td> 
                    {!index + 1}
                </td>
                <td>
                    <lightning:inputField aura:id="select" fieldName="Select"/>
                </td>
                <td>
                    <lightning:inputField aura:id="primaryname" fieldName="PrimaryInformation__c"></lightning:inputField>
                </td>
                <td>
                    <lightning:inputField fieldName="Status__c" value="{!acc.Status__c}"></lightning:inputField>
                </td>
                <td>
                    <lightning:inputField fieldName="Rejected_Type__c" value="{!acc.Rejected_Type__c}"></lightning:inputField>
                </td>
                <td>
                    <lightning:inputField  fieldName="Rejected_Reason__c" value="{!acc.Rejected_Reason__c}"></lightning:inputField>
                </td>
                <td>
                    <lightning:inputField fieldName="Dealine__c" value="{!acc.Dealine__c}"/>
                </td>
                   <!--<c:LightningDependentPicklistCmp/>-->
                <td style="padding-top: 27px;padding-left: 48px;">
                    <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>
            </tr>
                    </aura:iteration>
           </lightning:recordEditForm>

    </tbody>
</table>

</div>
</div>

Controller :

({
doInit : function(component, event, helper) {
     helper.addcar(component);
},
removeRow: function(component, event, helper) {
    //Get the account list
    var accountList = component.get("v.contactList");
    //Get the target object
    var selectedItem = event.currentTarget;
    //Get the selected item index
    var index = selectedItem.dataset.record;
    accountList.splice(index, 1);
    component.set("v.contactList", accountList);
},

save: function(component, event, helper) {
    if (helper.validateAccountList(component, event)) {
        helper.saveAccountList(component, event);
    }
},
handleAddcarClick : function(component,event,helper){
    helper.addcar(component);

} })

Helper:

({
    addcar : function(component) {
    var newCarobjmap = component.get("v.newCarMap");
     var carobj = component.get("v.newCar");
       console.log('carobj'+JSON.stringify(carobj));
       console.log('carobj Map'+JSON.stringify(newCarobjmap));

        var rowItemList = component.get("v.newCar");
        rowItemList.push({ 'sobjectType': 'Childcontact__c','Status__c': '','Rejected_Type__c': '','Rejected_Reason__c': '',
                           'Deadline__c':''});
        component.set("v.newCar", rowItemList);
    }
})

Here's what it looks like when I add a new row,

enter image description here

1

can you move lightning:recordeditform into inside the aura:iteration i used same way it works for me, please try like below

cmp

 <div class="container-fluid">        
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<tbody>      

            <!--<aura:iteration items="{!v.newCarMap}" var="acc" indexVar="index">-->
            <aura:iteration items="{!v.newCar}" var="acc" indexVar="index">
 <lightning:recordEditForm aura:id="CarCreateForm" objectApiName="Childcontact__c" >
        <tr>
            <td> 
                {!index + 1}
            </td>
            <td>
                <lightning:inputField aura:id="select" fieldName="Select"/>
            </td>
            <td>
                <lightning:inputField aura:id="primaryname" fieldName="PrimaryInformation__c"></lightning:inputField>
            </td>
            <td>
                <lightning:inputField fieldName="Status__c" value="{!acc.Status__c}"></lightning:inputField>
            </td>
            <td>
                <lightning:inputField fieldName="Rejected_Type__c" value="{!acc.Rejected_Type__c}"></lightning:inputField>
            </td>
            <td>
                <lightning:inputField  fieldName="Rejected_Reason__c" value="{!acc.Rejected_Reason__c}"></lightning:inputField>
            </td>
            <td>
                <lightning:inputField fieldName="Dealine__c" value="{!acc.Dealine__c}"/>
            </td>
               <!--<c:LightningDependentPicklistCmp/>-->
            <td style="padding-top: 27px;padding-left: 48px;">
                <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>
        </tr>

       </lightning:recordEditForm>
 </aura:iteration>

</tbody>

  • That worked, I think I missed that from your last post. appreciate it. This is my first lightning component and due to timelines I have jumped in without actually getting to learn it thoroughly. – apple123 May 28 at 17:18
  • how do I save these records too? – apple123 May 28 at 17:37
  • you can add save button under table , in onclick event of button you can get list of Childcontact__c by using component.get("v.newCar") then send that list to apex method. better to ask as new Question for save functionality with above my suggestions. – sdandamud1 May 28 at 18:00
  • sure, thank you. that helps, I will ask a new one. – apple123 May 28 at 18:01
2

It appears that you need to put the lightning:recordEditForm inside the aura:iteration, not the other way around. Each form will allow you to edit one record. The form is likely getting "confused" because the same field appears more than once within it.

  • Yes, that worked. Appreciate your help. I think I overlooked that from last post too. – apple123 May 28 at 17:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.