1

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"));
}
  • why are you using 4 map attributes? seems counter productive imo – glls Feb 12 at 14:11
  • additionally, when are you firing your event? is component.get("v.attribute") returning something before you fire the event? – glls Feb 12 at 14:13
  • @glls yeah, It has values. I put the firing of the event on the onkeyup event in the input field. Please see changes in the code above. Thanks – imajgavz Feb 12 at 14:21
  • @glls we are using customize components for the form inputs – imajgavz Feb 12 at 14:27
  • yes, i noticed, but why? what do they do that standard input fields dont? – glls Feb 12 at 14:36
3

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.

3

You shouldn't be using an Application event for this.

Reserve application events for communication between unconnected components or for when you need to communicate with multiple child components at once.

As @keepler said, use an Aura method for this. Example:

<aura:method name="registerDetails" action="{!c.doRegisterDetails}" > 
  <aura:attribute name="firstName" type="String" />
  <aura:attribute name="lastName" type="String" />
  <aura:attribute name="email" type="String" />
  <aura:attribute name="mobile" type="String" />
</aura:method>

Part of the controller method, doRegisterDetails:

doRegisterDetails : function(cmp, event) {
    var params = event.getParam('arguments');
    if (params) {
        var firstName = params.firstName;
        // etc
    }
}

And calling:

 component.find("mychildcomponent").registerDetails(firstName,lastName,email,mobile);

This assumes that the child component IS actually a child of the parent component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.