Need to change Value on every value change in lightning component

Question

HI I Want to Change Result(Servicevalibility) value as soon as there is any change in Input Fields.But,Now its changing only when i change the value and press tab key .

Component -

Serviceability

            </div>
        </div>
 </div>
    <div>
        <br/>
    </div>

 <div class="slds-grid">
    <div class="slds-col slds-size--4-of-6" >
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Net Income</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id="Netincome" class="slds-scope slds-input" placeholder="Enter Net Income" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Other Income</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id='otherincome' class="slds-scope slds-input" placeholder="Enter Other Income" keyup="{!c.Calculate}"/>

                    </div> 
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>


        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                 </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Marital Status</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputSelect aura:id="SelectedmaritalStatus"  class="slds-scope slds-input" change="{!c.onSelectChange}">
                        <ui:inputSelectOption label="--None--"/>
                        <aura:iteration items="{!v.MaritalStatus}" var="MaritalStatus"> 
                            <ui:inputSelectOption text="{!MaritalStatus}" label="{!MaritalStatus}" />
                        </aura:iteration>
                    </ui:inputSelect> 

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Number Of Dependents</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputnumber aura:id='NoofDependents' class="slds-scope slds-input" placeholder="Enter Number Of Dependents" keyup="{!c.Calculate}"/>
                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>


        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Residential Expense</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id="ResidentialExpense" class="slds-scope slds-input" placeholder="Enter Residential Expense" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Vehicle Loan</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id='VehicleLoan' class="slds-scope slds-input" placeholder="Enter Vehicle Loan" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>


        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                 </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Credit Card Combined Limit</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id="CreditCardLimit" class="slds-scope slds-input" placeholder="Enter Credit Card Limit" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Other Loan</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputCurrency aura:id='Otherloan' class="slds-scope slds-input" placeholder="Enter Other Loan" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>
        </fieldset>
        <fieldset class="slds-form--compound">
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                <div class="slds-form-element slds-size--1-of-4">
                 </div>
                    <div class="slds-form-element slds-size--1-of-4">

                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Other Expense</label>
                        <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold"></label>
                        <ui:inputcurrency aura:id="OtherExpense" class="slds-scope slds-input" placeholder="Enter Other Expense" keyup="{!c.Calculate}"/>

                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                    <div class="slds-form-element slds-size--1-of-4">
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    <div class="slds-col slds-size--1-of-6">
        <div>
            <div class="slds-size_2-of-2 slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">
                <center>
                    <label class="slds-form-element__label" for="inputNameSample1" style="font-weight:bold">Serviceability:</label>
                    <ui:outputText value="{!v.Serviceability}" />
                </center>
            </div>
            <div>

            </div>
        </div>
    </div>
     <div class="slds-col slds-size--1-of-6">
     </div>
 </div>   

</div>

Controller - ({ myAction : function(component, event, helper) {

},
Calculate : function(component,event,helper)
{
    debugger; 
    helper.calculateServiceability(component,event,helper);
},
onSelectChange : function(component,event,helper)
{
    helper.calculateServiceability(component,event,helper);
}

})

Helper- ({ helperMethod : function() {

},
calculateServiceability : function(component,event,helper)
{
    var MarriedTax = $A.get("$Label.c.Married_tax");
    var DependentTax = $A.get("$Label.c.Dependent_tax");
    var Netincome = component.find("Netincome").get("v.value");
    if(Netincome == '' || Netincome == null)
    {
        Netincome = 0;
    }

    var otherIncome = component.find("otherincome").get("v.value");
    if(otherIncome  == '' || otherIncome == null)
    {
        otherIncome =0;
    }

    var MaritalStatus = component.find("SelectedmaritalStatus").get("v.value");
    if(MaritalStatus != 'Married')
    {
        MarriedTax = 0;
    }

    var Dependents = component.find("NoofDependents").get("v.value");
    if(Dependents == '' || Dependents == null)
    {
        Dependents  = 0;
        DependentTax = 0;
    }

    var ResidentialExpense = component.find("ResidentialExpense").get("v.value");
    if(ResidentialExpense == '' || ResidentialExpense == null)
    {
        ResidentialExpense = 0;
    }

    var VehicleLoan = component.find("VehicleLoan").get("v.value");
    if(VehicleLoan == '' || VehicleLoan == null)
    {
        VehicleLoan = 0;
    }

    var CreditCardLimit = component.find("CreditCardLimit").get("v.value");
    if(CreditCardLimit == '' || CreditCardLimit == null)
    {
        CreditCardLimit=0;
    }

    var OtherLoan = component.find("Otherloan").get("v.value");
    if(OtherLoan  == '' || OtherLoan  == null )
    {   
        OtherLoan   = 0;
    }

    var OtherExpense  = component.find("OtherExpense").get("v.value");
    if(OtherExpense  == '' || OtherExpense  == null)
    {
        OtherExpense  = 0;
    }

    var Serviceability =0;
    Serviceability = (Netincome + otherIncome)-MarriedTax-(DependentTax*Dependents)-ResidentialExpense-VehicleLoan-(30*(CreditCardLimit/1000))-OtherLoan-OtherExpense-1515;
    if(Serviceability != null)
    {
        debugger;
         //alert('M IN');
         component.set("v.Serviceability",Serviceability);
         //component.set("v.Calculated",true);
    }


}

})

Answer 1

Use updateOn="keyup" in ui:inputcurrency, below is an example:

<ui:inputcurrency aura:id="OtherExpense" 
     class="slds-scope slds-input" 
     placeholder="Enter Other Expense" 
     keyup="{!c.Calculate}" 
     updateOn="keyup"/>

That should solve your issue.