0

My goal is to check if the user really changed the value in the input field.

In visualforce, I do this by storing the old value in HTML5 data attributes and onchange event compare the old value with the new value to see if it really changed:

<apex:inputField value="{!oppObj.field1__c}"
                 html-data-oldValue="{!oppObj.field1__c}">
</apex:inputField

But I am confused as how to do the same in lightning components as these are not supporting html5 data attributes. I have code something like this and it is not taking html5 data attributes.

<ui:inputNumber aura:id="someFld" 
                class="slds-input" 
                value="{!oppObj.field1__c}"
                change="{!c.fieldChanged}">
</ui:inputNumber>

Any help on this?

EDIT:

I have ui:inputNumber inside the aura:iteration tag, so it is like this:

<aura:iteration items="{!v.oppList}"
                var="oppObj"
                indexVar="i">
    <ui:inputNumber aura:id="{!i + '_someFld'}" 
                    class="slds-input" 
                    value="{!oppObj.field1__c}">
    </ui:inputNumber>
</aura:iteration>

As suggested, I am trying to define <aura:handler name="change"../> inside aura:iteration but it throws this error :

Failed to save undefined: markup://c:TestComponent:231,67: Invalid attribute "name": Source

2

You could use a handler for that.

Add this to your component:

<aura:handler name="change" value="{!v.value}" action="{!c.valueChanged}"/>

v.value = aura:attribute

c.valueChanged = method in your lightning controller

Then your ui:input would be like so:

<ui:inputNumber aura:id="someFld" 
            class="slds-input" 
            value="{!v.value}"
            change="{c.valueChanged}">
</ui:inputNumber>

Example here.

  • Thanks for posting this. One more question, my <ui:inputNumber> component is inside the <aura:iteration> tag so not sure how to define <aura:handler> for this. Any idea? Thanks again. – javanoob Dec 8 '16 at 6:05
  • It should work for a value in <aura:iteration>. ---- You could use <aura:handler name="change" value="{!v.ListItem.SomeVal}" action=" {!c.valueChanged}"/> as mentioned in this similar post salesforce.stackexchange.com/questions/146235/… – N.. Dec 8 '16 at 6:14
  • @javanoob Please update the question by adding info that inputNumber is inside aura:iteration. It's an important information which you should have to include in the first place. – Praveen Dec 8 '16 at 6:29
  • @Praveen, Agree with that. I updated my question. Thanks! – javanoob Dec 8 '16 at 6:40
1
  1. "aura:valueChange" event fires when value changes.

  2. The "aura:valueChange" event is handled by a client-side controller. A component can have multiple <aura:handler name="change">

    tags to detect changes to different attributes.

Example:

Component:

    <aura:handler name="change" value="{!v.myBool}" action="{!c.handleValueChange}"/>
     <aura:attribute name="myBool" type="Boolean" default="true"/>
    <ui:inputNumber aura:id="someFld" 
                class="slds-input" 
                value="3"
                change="{!c.fieldChanged}">
</ui:inputNumber>

Controller:

({
     handleValueChange : function (component, event, helper) {
        // handle value change
        console.log("old value: " + event.getParam("oldValue"));
        console.log("current value: " + event.getParam("value"));
    },
     fieldChanged : function (component, event, helper) {
      component.set("v.myBool", false);
    }

})

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.