[SalesForce] How to get aura Id of the inputNumber element in change event Handler

Here is the code for my problem:

HelloWorldApp.app

<aura:application >
    <c:inputNumberExample/>
</aura:application>

inputNumberExample.cmp

<aura:component>
    <ui:inputNumber aura:id="one-id" 
                    class="slds-input" 
                    value="2"
                    change="{!c.fldChanged}">
    </ui:inputNumber>
    <ui:outputNumber aura:id="one-id-op" 
                     value="1"
                     class="slds-hide">
    </ui:outputNumber>
</aura:component>

inputNumberExampleController.js

({
    fldChanged : function(component, event, helper) {
        console.log('Quantity field changed');
        console.log(component.getLocalId()); //prints undefined.
        var auraId = event.getSource().getLocalId(); 
        console.log(auraId); //prints undefined.
        var oldValue = component.find(auraId + '_OP').get("v.value");
        var newValue = component.find(auraId).get("v.value");
        console.log(oldValue);
        console.log(newValue);
    }
})

How do I get the aura:id attribute of the ui:inputNumber element inside event handler?

What I am trying to do is get the id of the element and append '-op' to it and locate the ui:outputNumber element and compare the values to see if the value changed?

Best Answer

I ran into that issue as well.

Could not get it to work using aura:id, so I used the good old 'id', HTML tags and JavaScript instead.

Component

<aura:component access="global" >
    <input type="text" id="one-id" class="slds-input" onchange="{!c.inputChanged}" />

    <input type="text" id="one-id-op" class="slds-input" value="1" readonly="true"/>
</aura:component>

I have used type="text" and onchange event for demo. purposes. Please change accordingly.

Controller.js

({
     inputChanged : function(component, event, helper) {
        var input = event.target.id; //this is = one-id
        var inputValue = document.getElementById(input).value;
        var output = document.getElementById(input + "-op");
        var outputValue = output.value;

        console.log('inputValue : ', inputValue);
        console.log('outputValue : ', outputValue);
    }
})
Related Topic