Aura - Salesforce , "v.remainingBalance" returning undefined

Question

CMP

<aura:attribute name="remainingBalance" type="Decimal" />

<lightning:tile label="Update Amount ">
     <div class="slds-grid slds-wrap">
     <div class="slds-col slds-size_1-of-3 slds-align-bottom slds-p-around_medium">
            <lightning:input label="Enter New Amount" value="{!v.remainingBalance}" type="Decimal" ></lightning:input>
                        </div>
                        <div class="slds-col slds-size_1-of-3 slds-align-bottom slds-p-around_medium">  
                            <lightning:button variant="neutral"
                                              label="Update Amount"
                                              title="Update Amount"
                                              disabled="{!v.disableButton}"
                                              onclick="{!c.updateRemainingBalance}"/>
                        </div>
       </div>
       </lightning:tile>

---

Controller

({
    doInit : function(component, event, helper) {
    },
    updateRemainingBalance: function(component, event, helper) {
        console.log("Check1: " + component.get("v.remainingBalance"));
        helper.validateAndUpdateRemainingBalance(component, event);
    }
})

---

Helper

({
    validateAndUpdateRemainingBalance : function(component, event) {
        console.log("Check2: " + component.get("v.remainingBalance"));
    }
}) 

`

v.remainingBalance should return null/value instead of undefined

Answer 1

Your ’value="{!v.remainingBalance’ is good only for displaying stuff. There's no magical bidirectional binding to save changes back. You want to transfer html input changes to ja variable - you need onchange() or similar handler dunction.

Search "onchange" and the "Set and Read Selection Indexes" chapter in https://developer.salesforce.com/docs/component-library/bundle/lightning:input/example documentation

Lots of posts on the net about this, for example https://salesforce.stackexchange.com/a/309193/799