Created
February 5, 2020 10:21
-
-
Save saicharanreddyk/c19b6c290463c2e154f68c6386d2a1b1 to your computer and use it in GitHub Desktop.
Lightning - How to read input values using attributes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In order to read values entered in input elements we can use <aura:attribute>. | |
To get the values from the input elements we need to use below code | |
component.get("v.Name Of the Attribute"); | |
And we need to provide the value attribute in lightning input | |
<lightning:input label="Enter Amount" type="number" required="true" value="{!v.Name Of the Attribute}"/> | |
To set the value to the component using the attribute we need to use the following code | |
component.set("v.Name Of the Attribute",Value which needs to be assigned); | |
Component | |
****************************************************************************** | |
<aura:component > | |
<aura:attribute name="aval" type="Integer"/> | |
<aura:attribute name="bval" type="Integer"/> | |
<aura:attribute name="cval" type="Integer"/> | |
<aura:attribute name="amount" type="Decimal"/> | |
<aura:attribute name="years" type="Decimal"/> | |
<aura:attribute name="rate" type="Decimal"/> | |
<aura:attribute name="interest" type="Decimal"/> | |
<lightning:card iconName="utility:company"> | |
<aura:set attribute="title"> | |
Calculator <br/> | |
Simple Calculator | |
</aura:set> | |
<aura:set attribute="actions"> | |
<lightning:button label="Add" onclick="{!c.add}"/> | |
<lightning:button label="Mul" onclick="{!c.mul}"/> | |
</aura:set> | |
<lightning:input label="Enter the Aval" type="number" value="{!v.aval}" required="true"/> | |
<lightning:input label="Enter the Bval" type="number" value="{!v.bval}" required="true"/> | |
<lightning:input label="Result" type="number" value="{!v.cval}"/> | |
</lightning:card> | |
<lightning:card iconName="standard:account"> | |
<aura:set attribute="title"> | |
ICICI Bank<br/> | |
Interest Calculator | |
</aura:set> | |
<aura:set attribute="actions"> | |
<lightning:buttonGroup> | |
<lightning:button label="Submit" onclick="{!c.submit}"/> | |
<lightning:button label="Reset" onclick="{!c.reset}"/> | |
</lightning:buttonGroup> | |
</aura:set> | |
<lightning:input label="Enter Amount" type="number" required="true" value="{!v.amount}"/> | |
<lightning:input label="Enter Years" type="number" required="true" value="{!v.years}"/> | |
<lightning:input label="Enter Rate" type="number" required="true" value="{!v.rate}"/> | |
<lightning:input label="Interest" type="number" value="{!v.interest}"/> | |
</lightning:card> | |
</aura:component> | |
****************************************************************************** | |
Controller: | |
****************************************************************************** | |
({ | |
add: function(component, event, helper) { | |
var aval = component.get("v.aval"); | |
var bval = component.get("v.bval"); | |
var result= parseInt(aval)+parseInt(bval); | |
component.set("v.cval",result); | |
}, | |
mul: function(component, event, helper) { | |
var aval = component.get("v.aval"); | |
var bval = component.get("v.bval"); | |
var result= parseInt(aval)*parseInt(bval); | |
component.set("v.cval",result); | |
}, | |
submit: function(component, event, helper) { | |
var amount= component.get("v.amount"); | |
var years= component.get("v.years"); | |
var rate= component.get("v.rate"); | |
var Interest= (parseInt(amount)*parseInt(years)*parseInt(rate)*12)/100; | |
component.set("v.interest",Interest); | |
}, | |
reset: function(component, event, helper) { | |
component.set("v.amount",null); | |
component.set("v.years",null); | |
component.set("v.rate",null); | |
component.set("v.interest",null); | |
} | |
}) | |
****************************************************************************** |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment