1

I have a component that dynamically generates a field using $A.createComponent. I want to add a change handler to the created component, and it fires as expected. However, I get an error saying that the controller action is not found.

Here's my component's controller:

doInit : function(component, event, helper) {
    // make the field component.
    $A.createComponent(component.get('v.fieldDefinition'), component.get('v.fieldAttributes'),function(cmp,status,error){
        if(component.get('v.fieldDefinition').startsWith('ui:')){
            // need to add a handler for standard ui: components.  
            // custom components register them on their own.
            cmp.addHandler('change',cmp, 'c.handleFieldUpdated');
        }
        component.set('v.cmp',cmp);
    });
},
handleFieldUpdated : function(component,event,helper){
    console.log('field updated');
}

The above init block generates a component, such as "ui:inputText". Then I use "cmp.addHandler" so I can tell it to call my "handleFieldUpdated" controller action when the value changes.

The change event fires, however the error message I receive is "Uncaught Unknown controller action 'handleFieldUpdated'"

I've tried using the following syntax in my addHandler to assign the controller action, and none have worked:

"c.handleFieldUpdated" "component.get('c.handleFieldUpdated')" "handleFieldUpdated"

All with the same error message. Is there another way to assign the correct controller action to the generated UI component?

EDIT:: I tried the following using "addEventHandler" as suggested in the comments.

doInit : function(component, event, helper) {
    // make the field component.
    $A.createComponent(component.get('v.fieldDefinition'), component.get('v.fieldAttributes'),function(cmp,status,error){
        if(component.get('v.fieldDefinition').startsWith('ui:')){
            // need to add a handler for standard ui: components.  
            // custom components register them on their own.
            cmp.addEventHandler('change', component.getReference("c.handleFieldUpdated"));
        }
        component.set('v.cmp',cmp);
    });
},
handleFieldUpdated : function(component,event,helper){
    console.log('field updated');
}

This gives me the following error: "Action failed: c:FieldComponent$controller$doInit [cmp.addEventHandler is not a function]"

1

Solved it. The addHandler call needs to reference the parent component, not the child that was generated. So it needs to change from this:

cmp.addHandler('change',cmp, 'c.handleFieldUpdated');

to this:

cmp.addHandler('change',component, 'c.handleFieldUpdated');
  • addHandler has been deprecated, and you should instead be using addEventHandler, as outlined here. – sfdcfox Aug 18 '17 at 18:32
  • @sfdcfox when I add the new syntax:: cmp.addEventHandler("click", component.getReference("c. handleFieldUpdated")); I get the following message: "Action failed: c:FieldComponent$controller$doInit [cmp.addEventHandler is not a function]" – Jason Benkert Aug 18 '17 at 20:24

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.