[SalesForce] Add onchange event for lightning:inputField in $A.createComponents

I am trying to create a lightning:inputField using $A.createComponents. The issue I have is that I am not able to add an onchange event. The field Level__c is a picklist field.

When I use the following code in the component the onchange event works fine:

<lightning:inputField fieldName="Level__c" onchange="{!c.reload}"/>

However, when I use the following code within $A.createComponents I get an error message ,Cannot read property 'indexOf' of undefined'.

Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<aura:attribute name="contract" type="Contract__c" default="{ 'sobjectType': 'Contract__c' }" access="public"/>
 <aura:handler name="init" value="{!this}" action="{!c.init}" /> 
<lightning:recordEditForm recordId="{!v.recordId}" objectApiName="Contract__c">
    {!v.body}
</lightning:recordEditForm>

Controller

({
init: function(cmp, event, helper){
    helper.createComponents(cmp);   

},

reload: function(cmp, event, helper){
    helper.createComponents(cmp);        
}})

Helper

({
createComponents: function(cmp){        
    console.log(cmp.getReference("c.reload"));
    $A.createComponent("lightning:inputField", {"fieldName"  : "Level__c", "aura:id": "Level__c", "onchange":cmp.getReference("c.reload")},
    function(newCmp, status, errorMessage){
        if (status === "SUCCESS") {
            var body = cmp.get("v.body");                
            body.push(newCmp);
            cmp.set("v.body", body);
        }            
        else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
        }
        else if (status === "ERROR") {
            console.log("Error: " + errorMessage);
        }
    });  
},})

Best Answer

I found a workaround. I just put the onchange event on the parent div as shown below. However, it would be nice to be able to assign it directly to lightning:inputField. I assume there is a bug in the code.

var changeOrderType = component.getReference("c.changeOrderType");
    newComponents.push(["aura:html", {"tag": "div", "HTMLAttributes": {"class": "slds-form-element__control", "onchange": changeOrderType}}]);      
    newComponents.push(["lightning:inputField", {"fieldName"  : "Contract_type__c", "aura:id": "input_contract_type__c", "value": contract.Contract_type__c}]);

Related Solutions

[SalesForce] onchange event listener for ui:inputSelect not working

Since you haven't given value attribute for the <ui:select/> component, you could do selectCmp.get("v.value") since it is internally available.Click here to find more attributes that are available in the component.

onChangeFunction: function(component,event) {
    console.log(event.getSource().get('v.value')); //only works for aura:component like <ui:inputSelect/>
}

If the value is attribute is binded to aura:attribute, you could do below:

<aura:attribute name="selectedRecType" type="String" access="private" />
<ui:inputSelect value="{!v.selectedRecType}" change="{!c.onChangeFunction}">
 ...
</ui:inputSelect>

Method in Controller.js should look like this:

onChangeFunction: function(component,event) {
    console.log(component.get('v.selectedRecType'));
}

--Update--

I tried to reproduce the issue,but change function works at my end.

Component:

<aura:component>
    <aura:attribute name="contactLevel" type="List" access="private"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <ui:inputSelect aura:id="levels" label="Contact Levels" change="{!c.onChangeFunction}">
        <aura:iteration items="{!v.contactLevel}" var="level">
             <ui:inputSelectOption text="{!level}" label="{!level}"/>
        </aura:iteration>
    </ui:inputSelect>
</aura:component>

Controller.js:

({
    doInit : function(cmp,event,helper){
        cmp.set("v.contactLevel",['Primary Contact', 'Secondary Contact', 'Other']);
    },
    onChangeFunction : function(cmp,event){
       console.log(event.getSource().get("v.value"));        
    }
})

[SalesForce] How to use $A.createComponents() on lightning:recordEditForm with nested lightning:inputField

I came up with a way to do this; you have to create the children first, and then the parent, similar to how the system would do it in mockup. Here's a demonstration:

<aura:application extends="force:slds">
    <aura:attribute name="recordEdit" type="Aura.Component[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    {!v.recordEdit}
</aura:application>

({
    init: function(component, event, helper) {
        // First, create children
        $A.createComponents([
            ["lightning:inputField", { fieldName: "Name"}],
            ["lightning:inputField", { fieldName: "Industry" }]
        ], (components, status, errors) => {
            // Then parent, specifying body of lightning:inputFields
            $A.createComponents(
            [["lightning:recordEditForm", { recordTypeId: "01250000000QNyF", objectApiName: "Account", body: components }]], 
                            (components, status, errors) => {
                                component.set("v.recordEdit", components);
                            });
        });
    }
})

Best Answer

Related Solutions

[SalesForce] onchange event listener for ui:inputSelect not working

[SalesForce] How to use $A.createComponents() on lightning:recordEditForm with nested lightning:inputField

Related Topic