Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save saicharanreddyk/c19b6c290463c2e154f68c6386d2a1b1 to your computer and use it in GitHub Desktop.
Save saicharanreddyk/c19b6c290463c2e154f68c6386d2a1b1 to your computer and use it in GitHub Desktop.
Lightning - How to read input values using attributes
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