I have a Contact object form with a child form component for Buying Center objects.
When I upsert the Contact, I need to submit a list of Buying Centers for this Contact.
Parent Contact component has a child component with ID attribute:
<c:buyingCenter masterRecordId="{!v.contact}" aura:id="buyingCentersComponent"/>
Parent controller calls aura:methods from child component upon onclick on a Save button:
upsertContact: function (component, event, helper) {
try {
component.find("buyingCentersComponent").initialSaveBuyingCentersAndCheckRequiredFields();
component.find("buyingCentersComponent").saveBuyingCentersFromParent();
helper.upsertContact(component, contact);
} catch (e) {
console.log('There was an error: ' + e);
}
}
In child Buying Center component I have recordEditForm inside an aura:iteration:
<aura:attribute name="buyingCenters" type="Buying_Center_Assignment__c[]" default="[]"/>
<aura:method name="initialSaveBuyingCentersAndCheckRequiredFields" action="{!c.initialSaveBuyingCentersAndCheckRequiredFields}" access="PUBLIC">
<aura:attribute name="foundError" default="false" type="Boolean"/>
</aura:method>
<aura:method name="saveBuyingCentersFromParent" action="{!c.saveBuyingCentersFromParent}" access="PUBLIC"/>
<aura:iteration items="{!v.buyingCenters}" var="buyingCenter">
<lightning:layout>
<lightning:layoutItem size="12">
<lightning:recordEditForm
aura:id="buyingCenterEditForm"
recordId="{!buyingCenter.Id}"
objectApiName="Buying_Center_Assignment__c">
<lightning:layout>
<lightning:layoutItem size="5">
<lightning:inputField fieldName="Purchase_Unit__c"/>
</lightning:layoutItem>
<lightning:layoutItem size="5">
<lightning:inputField fieldName="Role__c"/>
</lightning:layoutItem>
</lightning:layout>
</lightning:recordEditForm>
</lightning:layoutItem>
</lightning:layout>
</aura:iteration>
Now this child component has a method to add Buying Center objects to view. After adding the object the user can select values using recordEditForm:
addBuyingCenter: function (component, event, helper) {
var buyingCenters = component.get("v.buyingCenters");
if (buyingCenters == null) {
buyingCenters = [];
}
var buyingCenter = {};
buyingCenters.push(buyingCenter);
component.set("v.buyingCenters", buyingCenters);
}
When user finally clicks Save the list of Buying Centers is supposed to submit before the whole Contact form is also submitted:
initialSaveBuyingCentersAndCheckRequiredFields: function (component, event, helper) {
var foundCmp = component.find('buyingCenterEditForm');
console.log('Component to submit: ' + foundCmp);
for (var i = 0; i < foundCmp.length; i++) {
foundCmp[i].submit();
}
//After submitting I try to get the records again to check if submit was successful
var masterRecordId = component.get("v.masterRecordId");
helper.loadBuyingCenters(component, event, helper, masterRecordId);
//This should be assigned by the helper but it's empty
var buyingCenters = component.get("v.buyingCenters");
console.log('Buying centers after submit: ' + JSON.stringify(buyingCenters));
//additional logic to validate required fields
}
The problem is that the Buying Centersare not submitting. The logs currently show:
Component to submit: SecureComponentRef: markup://lightning:recordEditForm {427:0} {buyingCenterEditForm}{ key: {"namespace":"c"} } buyingCenter.js:100:17
Buying centers after submit: [{}]
The object is correctly added to the view, I can select fields in the Record Edit Form but they are not saving. Is there anything wrong with my logic?