How to create a hidden input field in a lightning component
There are basically two ways to achieve this
1 - SLDS Styling
You could use SLDS styling classes, .slds-hide
or .slds-hidden
, to hide your component from user and let it hold the value for later use.
Your input component would be hidden as
<lightning:input aura:id="quoteField" name="name" label="Name" value="{!v.newQuote.Name}" required="true" class="slds-hidden" />
Note: .slds-hidden
will take up space on your UI even thought the component would be hidden, whereas, .slds-hide
will not take up space on UI for the hidden component. So it upto you which style to use.
2 - Using attributes
Component
<!-- attribute which will be set in JS controller -->
<aura:attribute type="String" name="hiddenAttrib" default="anyvalue" />
<!-- -->
<aura:attribute name="name" type="String" default="New Quote"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:input aura:id="quoteField" name="name" label="Name"
value="{!v.name}" required="true"/>
JS Controller
You can then access your attribute in your JS controller and set it to your desired value or pass on to specific component or do some calculations/working on it.
doInit : function(component, event, helper) {
var hidden = component.get("v.hiddenAttrib");
var quote = component.get("v.name");
component.set("v.name", quote + ' - ' + hidden);
}