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,
