[SalesForce] Dynamic row values inherits the values from row before in lightning component

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?

screenshot of the issue.

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}

Was able to resolve the error, screenshot..
blank rows.

Best Answer

i tried with Account Object, lightning:recordeditform gives all picklistfields and dependent mechanism also, please try below solution.

cmp

<aura:component controller="SeTesting" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="newCar" type="Account" default="{ 'sobjectType': 'Account','Name': '','Type': '','Industry': '','Rating': ''}"/>
<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>      
            <aura:iteration items="{!v.newCarMap}" var="acc" indexVar="index">
                <lightning:recordEditForm aura:id="CarCreateForm" objectApiName="Account" >
                <tr>
                    <td> 
                        {!index + 1}
                    </td>
                    <td>
                        <lightning:inputField fieldName="Type"></lightning:inputField>
                    </td>
                    <td>
                        <lightning:inputField fieldName="Industry"></lightning:inputField>
                    </td>
                    <td>
                        <lightning:inputField  fieldName="Rating"></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>
               </lightning:recordEditForm>
            </aura:iteration>
        </tbody>
    </table>

</div>

controller.js

({
doInit :  function(component, event,helper) {    
        helper.addcar(component);

},
handleAddcarClick : function(component,event,helper){
        helper.addcar(component);
  }
})

helper.js

({
addcar : function(component) {
    var newCarobjmap = component.get("v.newCarMap");
     var carobj = component.get("v.newCar");
    if(!$A.util.isEmpty(newCarobjmap)){ 
        newCarobjmap.push(carobj);
        component.set("v.newCarMap",newCarobjmap) ;
    }else {    

        component.set("v.newCarMap",[].concat(carobj)) ;
    }
}
})

enter image description here

Related Topic