I have a lightning component where in I have a few text fields and 2 picklist fields, controlling and dependent. The problem is whenever I try to add a new row dynamically, the new row will take the same values as row above it. I am not able to set the new row's options to blank. I have referred this on to initiate the picklist values with new options but that won't work as I am adding it in DoInIt. Adding new row does not all doinit, is my understanding right?
the component code,
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="Nigoemailcommunication" >
<aura:attribute name="recordId" type="String" />
<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
<lightning:layoutItem>
<lightning:icon iconName="standard:scan_card" alternativeText="primaryinfo"/>
</lightning:layoutItem>
<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h1 class="slds-text-heading--label">NIGO Email Communication</h1>
<h2 class="slds-text-heading--medium">Primary Information</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
<aura:attribute name="newCar" type="Childcontact__c" default="{ 'sobjectType': 'Childcontact__c','primaryinformation__c': '','Status__c': '','rejected_type__c': '','deadline__c':'','Rejected_reason__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">
Add Row
<lightning:buttonIcon iconName="utility:add" size="large" variant="bare" alternativeText="Add" onclick="{!c.handleAddcarClick}"/>
</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">
<tr>
<td>
{!index + 1}
</td>
<td>
<lightning:inputField fieldName="status"></lightning:inputField>
</td>
<td>
<lightning:inputField fieldName="Rejected Type" value="{!acc.rejected_type__c}"></lightning:inputField>
</td>
<td>
<lightning:inputField fieldName="Rejected Reason" value="{!acc.rejected_reason__c}"></lightning:inputField>
</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>
</aura:component>
the controller is here, I have commented the code in the doInIt method to check if parent field is an array or not. if it's an array populate a different field or just one field.
HELPER :
({
addcar : function(component) {
var newCarobjmap = component.get("v.newCarMap");
var carobj = component.get("v.newCar");
newCarobjmap.push(carobj);
component.set("v.newCarMap",newCarobjmap) ;
if(!$A.util.isEmpty(newCarobjmap)){
newCarobjmap.push(carobj);
console.log('33 --'+newCarobjmap);
component.set("v.newCarMap",newCarobjmap) ;
}else {
console.log('36 --'+carobj);
component.set("v.newCarMap",[].concat(carobj)) ;
}
}
})
CONTROLLER ::
({
doInit : function(component, event, helper) {
helper.addcar(component);
},
handleAddcarClick : function(component,event,helper){
helper.addcar(component);
}
ERROR :
This page has an error. You might just need to refresh it. Action failed: c:NIGOEmailComp$controller$doInit [Cannot read property 'push' of null] Failing descriptor: {c:NIGOEmailComp$controller$doInit}
Best Answer
i tried with Account Object, lightning:recordeditform gives all picklistfields and dependent mechanism also, please try below solution.
cmp
controller.js
helper.js