function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NerdyNerdy 

Conditionnal markup to make a field required

Hello,

I need your help to achieve this conditionnal markup in a lightning form :

I want to make a text input mandatory whenever the user checks Yes on another radio-group input : 
<div class="slds-col slds-size_1-of-2">
                                <lightning:radioGroup name="  " 
                                                      options="{! v.yesNo }"
                                                      value="{! v.account.firstField}"
                                                      type="radio"
                                                      />
                            </div>

                            <div class="slds-col slds-size_1-of-2">
                                <lightning:input name=" " label="Label2"  value="{!v.account.secondField}"  />
                            </div>


 
Sampath SuranjiSampath Suranji
Hi,
try something like below, 
<aura:attribute name="inputRequired" type="boolean"/>

<div class="slds-col slds-size_1-of-2">
         <lightning:radioGroup name="  " 
                   options="{! v.yesNo }"
                   value="{! v.account.firstField}"
                   type="radio"
                   onchange="{!c.radioOnChange}"
          />
</div>

<div class="slds-col slds-size_1-of-2">
       <lightning:input aura:id="inputRequiredField"  label="Label2"  value="{!v.account.secondField}" required="{!v.inputRequired}" />
</div>

in controller.js
radioOnChange : function(component, event, helper) {
// I suppose your "account.firstField" has values as 'yes', 'no'. If it is not, please set the //condition accordingly
        if(component.get("{! v.account.firstField}")=='yes'){
             component.set("{! v.inputRequired}", true);
        }
        else{
            component.set("{! v.inputRequired}", false);
        }
       
    }
When you  set the "inputRequired" value inside the controller.js, then the input field get rerender.

regards