5

When using

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

I can see field go from old value to new one (event.getParam('oldValue')), but I cannot see which field it actually changed, making it not very useful :|

Is there a way to get field without doing component.get() ?

  • 2
    Nope. If you're writing code that depends on knowing the field that changed, you'll have to take responsibility for that. – sfdcfox Jun 30 '17 at 0:35
3

I've found this somewhat later, but I thought I'd respond. There is a undocumented parameter expression that returns the name of the data object name (not the input name or id):

console.log("changed: " + event.getParam("expression") + " " + event.getParam("oldValue") + " -> " + event.getParam("value"));

Results in: 
changed: v.leadInfo.lastName Last N -> Last Na

The change handler can be used to show or hide elements when a value changes from blank to a value (or the other way around) using $A.util.removeClass/addClass, or to run a form validation method.

Here's an example of my helper that does these things (it's an input form for a wrapperClass):

({
    init : function(component) { 
    },
    onLeadInfoChange: function(component, event) {  
        // INITIAL LOAD
        if (!component.get("v.leadInfoOrg")) { 
            var lead = component.get("v.leadInfo");

            // store initial object for possible reset  
            var leadOrg = Object.assign({}, lead); // clone
            component.set("v.leadInfoOrg", leadOrg);
        }

        this.validateForm(component);

        // set initial hidden/visible fields            
        if (event.getParam("expression").endsWith("leadInfo")) {
            this.toggleField(component, "account", component.get("v.leadInfo.accountName"));
            this.toggleField(component, "contact", component.get("v.leadInfo.lastName"));
        }
        if (event.getParam("expression").endsWith("accountName")) {
            this.toggleFieldwithOld(component, "account", event.getParam("value"), event.getParam("oldValue"));
        }
        if (event.getParam("expression").endsWith("lastName")) {
            this.toggleFieldwithOld(component, "contact", event.getParam("value"), event.getParam("oldValue"));
        }
        //console.log("MF_LeadForm.onLeadInfoChange: " + event.getParam("expression") + " " + event.getParam("oldValue") + " -> " + event.getParam("value"));     
    },
    showForm: function(component, show) {
        component.set("v.showForm", show);      
    },
    resetForm: function(component) {
        component.set("v.leadInfo", component.get("v.leadInfoOrg")); 
    },  
    submitForm: function(component, event, handler){ 
        event.preventDefault(); 

        // form is valid; updating Org and hide form
        var leadOrg = Object.assign({}, component.get("v.leadInfo")); // clone
        component.set("v.leadInfoOrg", leadOrg);                
        this.showForm(component, false);
    },  
    validateForm: function(component) {
        var fields=["accountName", "billingStreet", "billingPostalCode", "billingCity", "salutation", "firstName", "lastName", "contactPhone", "accountPhone", "email"]; 
        var field = ""; 
        var validity = null;

        for (var i=0; i<fields.length; i++) { 
            field=component.find(fields[i]); 
            validity=field.get('v.validity'); 
            if (typeof validity == 'object' && validity != null) { 
                if (!validity.valid){
                    component.set("v.validity", false);
                    console.log(fields[i]+': invalid.');
                    return;
                } 
            } 
        } 
        component.set("v.validity", true);
    },  
    toggleField: function(component, name, value) {     
        if (value) {
            this.showField(component, name);
        } else if (!value) {
            this.hideField(component, name);
        }        
    },
    toggleFieldwithOld: function(component, name, value, oldValue) {        
        if (value && !oldValue) {
            this.showField(component, name);
        } else if (!value && oldValue) {
            this.hideField(component, name);
        }        
    },
    hideField: function(component, name) {      
        $A.util.addClass(component.find(name), "slds-hide");
        $A.util.removeClass(component.find("no-" + name), "slds-hide");
    },
    showField: function(component, name) {
        $A.util.removeClass(component.find(name), "slds-hide");
        $A.util.addClass(component.find("no-" + name), "slds-hide");
    }
})
| improve this answer | |
  • Very nice! Of course need to be vary of using undocumented features :) How did you find it btw? – dzh Nov 14 '17 at 23:23
  • Great find with event.getParam("expression"). It's still working June 2018. – Philip F Jun 9 '18 at 19:45
1

This worked for me:

onInputValueChange: function(component, event) {  

    // If using lightning:inputField
    let fieldName = event.getSource().get('v.fieldName');

    // If using lightning:input, assign the field name as 'name' to the input component.
    let fieldName = event.getSource().get('v.name');
}
| improve this answer | |
-1

You can use aura:valueChange

Ref Link - https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_aura_valueChange.htm

So there is an event which will get fired when the value of attribute is changed, but there is no such way to get the old value, that you need to maintain by writing some logic which will set the old data in an attribute on load... something like that..

Hope this helps you

| improve this answer | |
  • 1
    I am not sure what are you trying to say. I am using that event, it does have an old value and what I actually need is a way to know which field in an object changed. – dzh Jul 3 '17 at 2:43

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.