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 Answers 2

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.

4
  • 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, 2016 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/…
    – S..
    Dec 8, 2016 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, 2016 at 6:29
  • @Praveen, Agree with that. I updated my question. Thanks!
    – javanoob
    Dec 8, 2016 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);
    }

})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .