[SalesForce] Undefined value from event

I am trying to get the value of (firstName, lastName, emailAddress, mobile) from the parent component and use it in my child component but when I set it into params and logged the values, I always got an undefined result. Please advice and thank you in advance. 🙂

enter image description here

Event.evt

<aura:event type="COMPONENT" description="Event template">
    <aura:attribute name="firstName" type="Map" />
    <aura:attribute name="lastName" type="Map" />
    <aura:attribute name="email" type="Map" />
    <aura:attribute name="mobile" type="Map" />
</aura:event>

parent_component.cmp

<aura:component>
<aura:attribute name="firstName" type="String" default=""/>
<aura:attribute name="lastName" type="String" default=""/>
<aura:attribute name="email" type="String" default=""/>
<aura:attribute name="mobile" type="String" default=""/>

    <aura:registerEvent name="registerDetailsEvent" type="c:Event" />

                <c:FormInput
                    aura:id="firstName"
                    type="text"
                    name="firstName"
                    value="{!v.firstName}"
                    label="{!$Label.c.firstName}"
                    onkeyup="{!c.onChange}" />

                <c:FormInput
                    aura:id="lastName"
                    type="text"
                    name="lastName"
                    value="{!v.lastName}"
                    label="{!$Label.c.lastName}"
                    onkeyup="{!c.onChange}" />

                <c:FormInput
                    aura:id="email"
                    type="text"
                    name="email"
                    value="{!v.email}"
                    label="{!$Label.c.email}"
                    onkeyup="{!c.onChange}" />

                <c:FormInput
                    aura:id="mobile"
                    type="text"
                    name="mobile"
                    value="{!v.mobile}"
                    maxlength="15"
                    label="{!$Label.c.mobile}"
                    onkeyup="{!c.onChange}" />

</aura:component>

parent_component.js

onChange : function (component, event, helper){
var registerDetailsEvent = component.getEvent("registerDetailsEvent");
    registerDetailsEvent.setParams({
    "firstName" : component.get("v.firstName"),
    "lastName" : component.get("v.lastName"),
    "email" : component.get("v.email"),
    "mobile" : component.get("v.mobile")
});
    registerDetailsEvent.fire();
}

child_component.cmp

<aura:component>

    <aura:handler name="registerDetailsEvent" event="c:Event" action= 
    {!c.registerDetailsEvent}"/>

</aura:component>

child_component.js

registerDetailsEvent: function(component, event, helper){
    console.log('Shoot');                                 
    console.log("firstName:", event.getParam("firstName"));
    console.log("lastName: ", event.getParam("lastName"));
    console.log("email: ", event.getParam("email"));
    console.log("mobileNumber: ", event.getParam("mobile"));
}

Best Answer

Component events are “clones” of standard DOM events (mouse clicks, key press, and so on). Just like their DOM counterparts, they propagate up in the component hierarchy via a bubbling mechanism and can be stopped en route to the application root component. enter image description here

you can achieve it using aura methods .or try with the application events but not with components. in your case you are trying to create a component event and do parent to child communication which is not possible.

Related Topic