7

I want to create a hidden input field in a lightning component to pass a default value.

<lightning:input aura:id="quoteField" name="name" label="Name"
value="{!v.newQuote.Name}" required="true"/>

I want to replace this fiels by:

name = {!v.opportunity.Name} + " - New Quote"
7
  • Why do you want to have a hidden field in lightning?
    – Mahmood
    Jan 16, 2018 at 9:42
  • 1
    I just want to set a default value to this field.
    – YesPapa
    Jan 16, 2018 at 13:41
  • Why you need to have a hidden input field? you can put your logic of the default value in the Controller side
    – Akram G
    Jan 16, 2018 at 14:14
  • 1
    You could use lightning attributes to hold default value.
    – Mahmood
    Jan 16, 2018 at 14:33
  • Ok. I will try this.
    – YesPapa
    Jan 16, 2018 at 17:25

2 Answers 2

17

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);
 }
4
  • Thank you @Mahmmod. The first solution is very interesting because I don't want that the use can see the field. I just want to set a default value to this field/parameter.
    – YesPapa
    Jan 17, 2018 at 13:11
  • @YesPapa : Please accept the answer if it helped, so others with similar issues may find the answer helpful as well.
    – Mahmood
    Jan 17, 2018 at 14:05
  • @Mahmmod. In the first solution, how can set the default value.
    – YesPapa
    Jan 18, 2018 at 13:19
  • You can create aura:attribute and assign it to the input component.
    – Mahmood
    Jan 18, 2018 at 15:21
0

This is an attribute solution:

<aura:attribute name="name" type="String" default="New Quote"/>
<lightning:input aura:id="quoteField" name="name" label="Name"
value="{!v.newQuote.Name}" required="true"/>

I'd like a controller solution - I can't see how to start but certainly the best solution because I don't want that the user can see the field with the default value.

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .