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() ?

1
  • 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, 2017 at 0:35

3 Answers 3

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");
    }
})
2
  • Very nice! Of course need to be vary of using undocumented features :) How did you find it btw?
    – dzh
    Nov 14, 2017 at 23:23
  • Great find with event.getParam("expression"). It's still working June 2018.
    – Philip F
    Jun 9, 2018 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');
}
-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

1
  • 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, 2017 at 2:43

You must log in to answer this question.

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