lightning:input doesn't always bind to attribute references?

Question

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)

Answer 1

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"));
  }

})