2

Is there a way to catch the change event of a particular field/component? I saw on the AuraDocs that there is a valueChange event but trying to handle it makes the app throw an error on load. I was wondering if I could build some automatic field validation / search suggestions without relying on other js libraries.

2 Answers 2

6

Here is a complete example that does what I think you were attempting to do:

<aura:component implements="force:appHostable">
    <aura:attribute name="expenseName" type="String" default="My Expense"/>
    <aura:handler name="change" value="{!v.expenseName}" action="{!c.expenseNameChanged}"/>     

    <ui:inputText label="Expense Name" value="{!v.expenseName}"/>
</aura:component>

in the component's client controller:

({
    expenseNameChanged : function(component, event, helper) {
        var newValue = event.getParam("value");
        var oldValue = event.getParam("oldValue");
        alert("Expense name changed from '" + oldValue + "' to '" + newValue + "'");
    }
})
0
3

valueChange is definitely what you are looking for - are you wiring it up like this:

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

taken from http://www.salesforce.com/us/developer/docs/lightning/lightning.pdf

What error is the app (and what app are you working in?) throwing?

3
  • Definitely, the "valueChange" event can't be found and the "change" event never fires. <aura:component> <aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/> <ui:inputText aura:id="items" label="Expense Name" value="My Expense" updateOn="change"/> </aura:component> ` itemsChange : function(component, event, helper) { console.log('something is changing'); var v = event.getParam("value"); if (v === component.get("v.items")) { console.log(v.get('v.value')); } }` I'm working on a appHostable cmp inside of SF1. Thanks!
    – Diego
    Nov 12, 2014 at 18:59
  • Sorry for the mess but couldn't get the linebreaks working. Thanks Doug and quick question: is the AngularJS +Lightning pack you talked about in Dreamforce in github?
    – Diego
    Nov 12, 2014 at 19:07
  • The code you posted does not really make sense - the ui:inputText is not wired to any component attribute or model property which means there is no 2 way data binding in place. This is similar to missing ng-model in Angular.js - not much is going to happen. Also the component does not appear to even have a v.items attribute defined on it. Nov 13, 2014 at 12:15

You must log in to answer this question.

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