Updating parent component record name from child sub-component edit via event

Question

onites. I have encountered an issue with updating a record from a child sub-component. The parent component passes the attribute when it instantiates the child component but whenever there is an edit in a child's lightning:input, the change does not reflect in the parent after the COMPONENT event has fired. Any help would be greatly appreciated!

Event

<aura:event type="COMPONENT">
        <aura:attribute name="updateField" type="String" />
</aura:event>

Parentcmp.cmp

<force:recordData aura:id="recordLoader"
                  recordId="{!v.recordId}"
                  layoutType="FULL"
                  targetRecord="{!v.record}"
                  targetFields="{!v.simpleRecord}"
                  targetError="{!v.recordError}"
                  mode="EDIT"/>

<aura:handler name="componentEventFired"
              event="c:ContentEditorEvent"
              action="{!c.handleComponentEventFired}" />

<c:childcmp docName = "{!v.simpleRecord.Name}"

ParentController.js

handleComponentEventFired : function(cmp, event) {
    var updateField = event.getParam("updateField");
    cmp.set("v.simpleRecord.Name", updateField);
    },

Childcmp.cmp

<aura:attribute name="docName" type="String" />
<aura:registerEvent name="componentEventFired" type="c:ContentEditorEvent" />

<lightning:button label="Save" variant="brand" onclick="{!c.fireComponentEvent}" />

ChildController.js

fireComponentEvent : function(cmp, event) {
    var docName = cmp.get("v.docName");
    var cmpEvent = cmp.getEvent("componentEventFired");

    cmpEvent.setParams({"updateField" : docName});
    cmpEvent.fire();
    },

I just don't get why this doesn't update the record.

Answer 1

You didn't actually save the record. As an aside, all this work you've done is basically pointless, because two-way binding works automatically; when docName is updated in the child, the simpleRecord.Name value in the parent is automatically updated. If you want to update the record, all you need to do is call saveRecord:

handleComponentEventFired : function(cmp, event) {
  cmp.find("recordLoader").saveRecord();
},

I've written a minimal reproduction for you to take a look at:

App

<aura:application extends="force:slds">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="simpleRecord" type="Map" default="{}" />
    <aura:attribute name="recordError" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      layoutType="FULL"
                      targetError="{!v.recordError}"
                      targetFields="{!v.simpleRecord}"
                      mode="EDIT"/>
    <c:q214934c docName="{!v.simpleRecord.Name}" onsave="{!c.save}" />
    <hr />
    {!v.simpleRecord.Name}
    <hr />
    {!v.recordError}
</aura:application>

---

App Controller

({
    init: function(component, event, helper) {
        if(!component.get("v.recordId")) {
            component.find("recordLoader").getNewRecord("Account");
        }
    },
    save: function(component, event, helper) {
        component.find("recordLoader").saveRecord();
    }
})

---

Component

<aura:component >
    <aura:registerEvent name="onsave" type="c:saveEvent" />
    <aura:attribute name="docName" type="String" />
    <lightning:input label="Input" value="{!v.docName}" />
    <lightning:button label="Save" variant="brand" onclick="{!c.notifyParent}" /> 
</aura:component>

---

Component Controller

({
    notifyParent: function(component, event, helper) {
        component.getEvent("onsave").fire();
    }
})

---

Event

<aura:event type="COMPONENT" description="Event template" />