[SalesForce] lightning:input doesn’t always bind to attribute references

I know lightning:input is in beta, but am curious if other people have noticed this behavior, and if this is a known issue/bug?

When I use lightning:input with value references to attributes, type="String" (or text) updates the attribute, but type="toggle" does not. Other types might also not update the attribute, I haven't checked all the other types.

Using the below sample code, when I type into the input field, I see the console log updated with each keypress. But when I click the toggle, nothing is logged.

Perhaps this is just growing pains of lightning:input being in beta?

App (testFieldUpdate_App):

<aura:application >
    <ltng:require styles="{!$Resource.SLDS213 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"/>

    <div class="xxxxxxx-slds">
        <c:testFieldUpdate/>
    </div>
</aura:application>

Component (testFieldUpdate):

<aura:component >
    <aura:attribute name="caseNumber"           type="String"/>
    <aura:attribute name="toggleCaseEscalation" type="Boolean"/>

    <aura:handler name="change"  action="{!c.caseNumberChanged}"           value="{!v.caseNumber}"/>
    <aura:handler name="change"  action="{!c.toggleCaseEscalationChanged}" value="{!v.toggleCaseEscalation}"/>

    <lightning:input name="inputCaseNumber"
                     aura:id="inputCaseNumber"
                     type="String"
                     label="Case Number"
                     value="{!v.caseNumber}"/>

    <lightning:input name="inputToggleCaseEscalation"
                     aura:id="inputToggleCaseEscalation"
                     type="toggle"
                     label="Toggle Case Escalation"
                     value="{!v.toggleCaseEscalation}"/>

</aura:component>

Component controller (testFieldUpdateController):

({
    caseNumberChanged : function(component, event, helper) {
        console.log("DEBUG: (testFieldUpdateController.caseNumberChanged) caseNumber changed; new value = " + component.get("v.caseNumber"));
    },

    toggleCaseEscalationChanged : function(component, event, helper) {
        console.log("DEBUG: (testFieldUpdateController.toggleCaseEscalationChanged) toggleCaseEscalation changed; new value = " + component.get("v.toggleCaseEscalation"));
    },

})

(end of post)

Best Answer

The below worked for me .The issue was that the value has to be binded to the checked attribute for toggle, checkbox and radio buttons

<aura:component >
<aura:attribute name="toggleCaseEscalation" type="Boolean"/>

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

<lightning:input name="inputToggleCaseEscalation"
                 aura:id="inputToggleCaseEscalation"
                 type="toggle"
                 label="Toggle Case Escalation"
                 checked="{!v.toggleCaseEscalation}" />
 </aura:component>

The JS controller for the same

({
    toggleCaseEscalationChanged : function(component, event, helper) {
      console.log('VALUE..'+component.find("inputToggleCaseEscalation").get("v.checked"));//Another way to capturing the value via an Id .
      console.log(component.get("v.toggleCaseEscalation"));
      console.log("DEBUG: (testFieldUpdateController.toggleCaseEscalationChanged) toggleCaseEscalation changed; new value = " + component.get("v.toggleCaseEscalation"));
  }

})

Related Solutions

[SalesForce] Unable to get value of String from Component to JS Controller

You need to give the attribute a default value:

<aura:attribute name="listItem" type="ToDoObj__c" default="{ sobjectType: 'ToDoObj__c', Name: '' }"/>

[SalesForce] get values in lightning:input with $A.createComponents

In order to bind to something dynamically, you need a reference. Here is a very basic, no-frills, slightly buggy implementation that demonstrates that this basically works.

Notice how I use component.getReference to dynamically link to a field. Also notice how I can bind to the same field twice, which literally lets me modify the same field more than once in real-time, just to prove that they are real references.

With a little more error checking and fact-gathering, this could indeed be a dynamic form with some basic describe data, etc. Notice how I do not use aura:id at all. I simply bound all the fields to a common object, and I could get and retrieve the values at will (in this case, demonstrated through Object.keys). I could also bind this object to, say, a force:recordData to dynamically save the data back to the server, or send it through a server action in Apex.

<aura:application extends="force:slds">
    <aura:attribute name="accountRecord" type="Account" default="{ 'sobjectType': 'Account' }" />
    <aura:attribute name="edits" type="Aura.Component[]" />
    <aura:attribute name="fieldName" type="String" />
    <aura:attribute name="output" type="String" />

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

    {!v.output}

    <hr />

    {!v.edits}

    <ui:inputText value="{!v.fieldName}" />
    <ui:button press="{!c.addField}" label="Add" />
    <br/>
    <ui:button press="{!c.display}" label="Show Data" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.edits", []);
    },
    addField: function(component, event, helper) {
        var field = component.get("v.fieldName"), 
            obj = component.get("v.accountRecord");
        obj[field] = "";
        component.set("v.accountRecord", obj);
        $A.createComponent(
            "lightning:input", {
                value: component.getReference("v.accountRecord."+component.get("v.fieldName")),
                label: component.get("v.fieldName"),
                type: "Text"
            },
            $A.getCallback(function(newCmp, status, error) {
                var edits = component.get("v.edits");
                edits.push(newCmp);
                component.set("v.edits", edits);
            })
        );
    },
    display: function(component, event, helper) {
        var obj = component.get("v.accountRecord");
        var results = [];
        Object.keys(obj).forEach(function(key) { results.push(key+":"+obj[key])});
        component.set("v.output", results.join('\n'));
    }
})

Here's a demo of me dynamically binding stuff:

Best Answer

Related Solutions

[SalesForce] Unable to get value of String from Component to JS Controller

[SalesForce] get values in lightning:input with $A.createComponents

Related Topic