mjhjmtu

I have a lightning:select picklist on a Lightning component called "Best Method of Contact" which is a required picklist, but the required picklist defaults to a blank 'placeholder' value that the user must change. The values are as follows:

• -SELECT ONE- (Default/Undefined)


• Phone


• Email

Issue: I also want to present the user with a lightning:input to enter
either a Phone Number, or an Email, and I want this rendered
dynamically onChange of the picklist so that if the user chooses
"Email" they get the Email input, and the Phone input for Phone.

However, when the user hasn't selected either option yet, and is still
set to the default -SELECT ONE- option, I don't want to render EITHER
of the lightning:input fields on the page.

I know aura:if is the lightning equivalent of If X, Do Y, ELSE do Z but it doesn't appear to have an ELSE IF condition in the documentation, so it really is only a boolean as far as I can tell. If the condition is met, render A, otherwise render B.

This doesn't work in my case because I have 3 conditions not 2, A (Phone), B (Email), and C (None).

Question: I imagine I can wrap an aura:if around another aura:if to use it
very similarly to an IF statement in a Formula field, but before I
went down that route I wanted to make sure I wasn't missing any other
(better or more reliable) option that I might be able to use for this.
Lightning:input doesn't have a rendered variable like the
apex:outputPanel component does, so I can't set it there, and I
can't find an equivalent to the rendered variable on the lightning:
components

Is there a more correct way to do this?

I would think the simplest way to achieve is to just write 3 different aura:if blocks. Something as below?

<aura:if isTrue=!v.selectedVal == 'Phone'>
 .. do something ..
</aura:if>
<aura:if isTrue=!v.selectedVal == 'Email'>
 .. do something ..
</aura:if>
<aura:if isTrue=!v.selectedVal == 'None'>
 .. do something ..
</aura:if>

You can use if, else-if, else with nested elements:

<aura:if isTrue="!v.selected == 'None'">
 <aura:set attribute="else">
 <aura:if isTrue="!v.selected == 'Phone'">
 <lightning:input label="Phone" ... />
 <aura:set attribute="else">
 <lightning:input label="Email" ... />
 </aura:set>
 </aura:if>
 </aura:set>
</aura:if>