[SalesForce] Why won’t the Lightning Component Attributes store entered value

2/15/2017 Update

Per comment from Doug in one of the answers this is an issue with Locker service. I verified that with Locker disabled is works as expected…

In Spring 17 as of today, with locker enabled it is still not working however

Update

So, since we get an internal error when passing classes/objects to apex controllers AND if values are not set in the controller when the component requests them then there is no way to pass those properties back (see below), I am left with this mess for every non string property

    @AuraEnabled public String endDate {
        get {
            return endDate == null ? '' : endDate;
        }
        set;
    }
    private date endDateValue {
        get {
            if (string.isBlank(endDate)) return null;

            return date.valueOf(endDate);
        }
        set {
            if (value == null) endDate = null; else endDate = string.valueOf(value);

        }
    }

Should not have to go through all that to use a simple class property in a component…Ugh

Original discussion

So I have been fighting with this for a while. Maybe my mindset is wrong and what I am doing is correct but it just seems like a lot of extra work.

Scenario

Component with attribute set to a type of a custom class
Input boud to a property in that class

Now is it too much to as that when the data is entered in the input that it is reflected in the component? The actual input keeps the value but the attribute is never set….

It makes it extremely difficult to pass data around. Right not I am manually setting the attribute properties based on the value input in the component.

So the examples:

The first input when data is input always logs as:

{}

The second input the data logs correctly when value are input into the field.

The weird part is that accessing the actual property outputs as expected:

console.log(component.get('v.myCustomClass.myTestString'));

outputs

a

as shown in the second debug line in the image

Custom Class

public class myProblemClass {
    @AuraEnabled public string myTestString {get;set;}

    public myProblemClass(){

    }

    public myProblemClass(String setDefault){
        mytestString = setDefault;
    }
}

Apex Controller

public class myProblemController {

    @AuraEnabled
    public static myProblemClass newProblemClass(){
        return New myProblemClass();
    }

    @AuraEnabled
    public static myProblemClass newProblemClassInitial(){
        return New myProblemClass('initial');
    }

}

Lightning Component

<aura:component description="myProblemComponent" controller="myProblemController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="myCustomClass" type="myProblemClass"/>
    <aura:attribute name="myCustomClassInitial" type="myProblemClass"/>

                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="text-input-01">Input Label</label>
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="firstInput" updateOn="keyup" keyup="{!c.logMe}" requiredIndicatorClass="slds-required"
                                      required="true" value="{!v.myCustomClass.myTestString}" placeholder="Enter Me"
                                      class="slds-input"/>
                    </div>
                </div>

                <div class="slds-form-element">
                    <label class="slds-form-element__label" for="text-input-01">Input Label</label>
                    <div class="slds-form-element__control">
                        <ui:inputText updateOn="keyup" keyup="{!c.logMe}" requiredIndicatorClass="slds-required"
                                      required="true" value="{!v.myCustomClassInitial.myTestString}" placeholder="Enter Me"
                                      class="slds-input"/>
                    </div>
                </div>

</aura:component>

Component Controller

({
    doInit: function (component, event, helper) {

        var action = component.get("c.newProblemClass");
        var actionInitial = component.get("c.newProblemClassInitial");

        action.setCallback(this, function (response){
            component.set('v.myCustomClass',response.getReturnValue());
        })

        actionInitial.setCallback(this, function (response){
            component.set('v.myCustomClassInitial',response.getReturnValue());
        })

        $A.enqueueAction(action);
        $A.enqueueAction(actionInitial);

    },
    logMe: function(component,event,helper){
        console.log(JSON.stringify(component.get('v.myCustomClass')));
        console.log(component.get('v.myCustomClass.myTestString'));
        console.log(JSON.stringify(component.get('v.myCustomClassInitial')));
    }
})

Now, I get that in the first attribute that I am not setting the value of the class property thus the Java object does not contain anything. However, when I set a value in the first Input that is Bound to the class property I would expect it to set it.

The questions:

Are my expectations incorrect
If #1 is true then is setting the value of the attribute as follows the correct way. Keeping in mind my real class has 20-30 properties so that is a lot of extra code to write just to set the values
```
 component.get('v.myCustomClass').myTestString = 
      component.find('firstInput').get('v'value');
```

So as Ashwani points out, the binding of the value on the input get set properly so you can access the property directly. So why does it still output as {} when logging the attribute.

Now if I do this:

    component.get('v.myCustomClass').myTestString = 'ABCDEF';
    console.log(JSON.stringify(component.get('v.myCustomClass')));

then JSON of the attribute outputs the correct JSON string (see 4th debug line). So I can set it in the JS but there is no way to set it in using the actual Input field?? But you can access the property directly when set by the input field v.myCustomClass.mytestString….Confusing…..

Best Answer

Code is working as expected.

In the above approach there is basic problem. Lightning does not initialize any variable itself.

In controller testString is not defined so, it is not even getting set and result {}:-

public class myProblemClass {
    @AuraEnabled public string myTestString {get;set;}

    public myProblemClass(){
    }

    public myProblemClass(String setDefault){
        mytestString = setDefault;
    }
}

Define variable in no argument constructor and it will start working:-

public myProblemClass(){
   mytestString = '';
}

There is a framework logic. Only you know there is myCustomClass.myTestString but framework doesn't know.

Take the example: set the input as:

 <ui:inputText aura:id="firstInput" updateOn="keyup" keyup="{!c.logMe}" requiredIndicatorClass="slds-required"
                                      required="true" value="{!v.myCustomClass.myTestStringNOTEXIST}" placeholder="Enter Me"
                                      class="slds-input"/>

and access it as

console.log( ' 1.1 '+component.get('v.myCustomClass.myTestStringNOTEXIST'));

You will get the value but it is not the variable in controller.

Related Solutions

[SalesForce] How to validate multiple properties in lightning components (event livecycle / setter)

So far I found out a good way is the usage of <aura:method> (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm?search_text=aura:method

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cmp_methods.htm?search_text=aura:method)

Rather bind directly on both change events individual I wrote one method which accepts two parameters for both values:

<aura:method name="setDateRange" action="{!c.onSetDateRange}" access="PUBLIC"
    description="Initializes component with the start and end date of the date range">
    <aura:attribute name="startDate" type="Date" />
    <aura:attribute name="endDate" type="Date" />
</aura:method>

where inside my controller I do the validation logic like

onSetDateRange: function(component, event, helper) {
    //get the passed in date values
    var params = event.getParam("arguments");
    var newStartDate = params.startDate;
    var newEndDate = params.endDate;

    //validate newStartDate is before newEndDate, otherwise change order
    if($A.localizationService.isBefore(newStartDate, newEndDate))
    {
        //change order and store the new values in the component 
        component.set("v.startDate", newEndDate);
        component.set("v.endDate", newStartDate);
    }
    else
    {
        //directly store new values
        component.set("v.startDate", newStartDate);
        component.set("v.endDate", newEndDate);
    }

},

and storing the values in private like attribute way:

<aura:attribute name="startDate" type="Date" access="PRIVATE" />
<aura:attribute name="endDate" type="Date" access="PRIVATE" />

So no more change handler on the attributes.

The downside is that I can only call the method from JavaScript and not directly set values through expressions in the component markup.

Hope that helps Chris

[SalesForce] How to pass a function as a Lightning component attribute

The solution is to declare an event instead of an attribute when you want to provide a callback. Below is myButton.cmp rewritten to use events.

pressEvent.evt

<aura:event type="COMPONENT" />

myButton.cmp

<aura:component>
    <aura:attribute name="label" required="true" type="String" />
    <aura:attribute name="class" required="false" type="String" />

    <!-- Declare an "instance" of pressEvent -->
    <aura:registerEvent name="press" type="c:pressEvent"/>

    <input type="button" value="{!v.label}" class="{!v.class}" onclick="{!c.onClick}" />
</aura:component>

myButtonController.js

({
    onClick : function(component, event, helper) {
        helper.trackButtonClick(component, event);

        var event = component.getEvent('press');
        event.fire();
    }
})

This wasn't clear from the documentation, but there are two ways to handle an event. The first is to use the <aura:handler /> markup. To handle the press event of myButton, you could do this:

<aura:handler name="press" event="c:pressEvent" action="{!c.onOk}"/>

I would avoid this approach because if you have more than one button, the press event for all of them would be handled by the same action c.onOk.

The second way to handle an event is to pass a callback as an attribute in the <c:myButton /> markup. I didn't see this in the Salesforce docs but found it in an unrelated question. This is exactly what I needed. Each instance of myButton gets a unique callback.

myButtonConsumer.cmp

<aura:component>
    <!-- No aura:handler necessary. Just pass the callback as an attribute -->
    <!--<aura:handler name="press" event="c:pressEvent" action="{!c.onOk}"/>-->

    <c:myButton label="OK" class="slds-button" press="{!c.onOk}" />
    <c:myButton label="Cancel" class="slds-button" press="{!c.onCancel}" />
</aura:component>

myButtonConsumerController.js

({
    onOk: function(component, event) {
        alert('OK pressed!');
    },

    onCancel: function(component, event) {
        alert('Cancel pressed!');
    }
})

Best Answer

Related Solutions

[SalesForce] How to validate multiple properties in lightning components (event livecycle / setter)

[SalesForce] How to pass a function as a Lightning component attribute

Related Topic