0

I am implementing simple Contact create/edit form and I have problems with automatic setting of one field (consbp) based on an entry in different field (AccountID). The main component (contactCreate.cmp) needs to register an event which is firing up when Account ID field is changed, and a child component (consbpAutoFill.cmp) will handle that event and set value in the field consbp.

Event:

<aura:event type="APPLICATION" description="editAccountEvent">
    <aura:attribute name="accountId" type="String"/>
</aura:event>

Main component contactCreate.cmp is using a recordEditForm for AccountID and has onchange call to JS controller function. The component also has the child component for consbp field:

<aura:component controller="contactController">

    <!-- Account ID edit Event-->
    <aura:registerEvent name="editAccount" type="c:editAccountEvent"/>

     <!-- Lookup for Account object-->
     <lightning:recordEditForm class="slds-m-around_small"
                                          aura:id="recordViewForm"
                                          objectApiName="Contact">

           <lightning:inputField fieldName="AccountId" value="{!v.contact.AccountId}" onchange="{!c.autoConsBP}"/>
     </lightning:recordEditForm>

     <!-- Child component to auto fill -->
     <c:consbpAutoFill/>
</aura:component>

contactCreateController.js has a function which calls the editAccountEvent (AccountId is an array because of recordEditForm):

autoConsBP: function (component, event, helper) {
        var cmpEvent = component.getEvent("editAccount");
        cmpEvent.setParams({
            "accountId": component.get("v.contact.AccountId")[0]
        });
        cmpEvent.fire();
    }

The child component consbpAutoFill.cmp has a handler defined for the editAccountEvent:

<aura:component description="consbpAutoFill" controller="contactController">

    <aura:attribute name="consBP" type="String"/>
    <aura:handler name="editAccount" event="c:editAccountEvent" action="{!c.autoFillConsbp}"/>

    <lightning:input class="slds-m-around_small" required="true" label="Cons BP"
                     placeholder="consbp" type="text" variant="standard"
                     aura:id="consBP" value="{!v.consBP}" disabled="true"/>
</aura:component>

The last part is the child component JS controller (consbpAutoFillController.js):

    autoFillConsbp: function (component, event, helper) {
        //Just print id for now
        var accountId = event.getParam("accountId");
        console.log("Account ID: " + accountId);
    }

When I do console.log() of AccountId in main component, it is correctly being set and the event seems to fire up, but nothing is happening after that. The whole logic of auto fill was working as long as the whole form was in contactCreate component but I need to seperate consbp field into seperate component and handle changes using events. Am I missing anything?

  • 1
    Application event handling musn't specify a name for the event. The event is handled through its type. You should remove the name attribute on the aura:handler. – Martin Lezer Jun 3 at 13:01
  • @MartinLezer would you mind adding it as an answer? – Pranay Jaiswal Jun 3 at 13:04
1

You are using an incorrect sintax for application events:

var cmpEvent = component.getEvent("editAccount");
    cmpEvent.setParams({
        "accountId": component.get("v.contact.AccountId")[0]
    });
    cmpEvent.fire();

When you have an Application Event, the correct syntax is:

var appEvent = $A.get("e.c:appEvent");
appEvent.fire();

You can read more here

  • Removing the name attribute from aura:handler and changing the syntax of firing up an Application Event solved the issue - I was able to correctly send the event, thanks! – UO Man Jun 3 at 13:14
  • 1
    @UOMan one more thing when you want to call a method on a child component use aura:method that enables you to directly call a method in a component’s client-side controller instead of firing and handling an event. – vignesh Jun 3 at 19:29

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.