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

Improve this question

2 Answers 2

Reset to default
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.

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

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.