Make field Mandatory when corresponding record button is clicked

Question

I have the following code in my Lightning Component

<aura:iteration items="{!v.wrapAccountList}" var="arItem" indexVar="index">
<tr>
    <div class="slds-truncate">
      <lightning:select name="rejectReasonPick" label="" value="{!arItem.acc.rejectReason}">
                                <aura:iteration items="{!v.rejectReasonPickList}" var="reason">
                                    <aura:if isTrue="{!arItem.acc.rejectReason  == reason.value}">
                                        <option text="{!reason.label}" value="{!reason.value}" selected="true"/>
                                        <aura:set attribute="else">
                                            <option text="{!reason.label}" value="{!reason.value}"/>
                                        </aura:set>
                                    </aura:if>
                                </aura:iteration>
                            </lightning:select>
                            </div>
    <td>
    <div class="slds-button-group" role="group">
                                <lightning:buttonIcon aura:id="addButton" iconName="utility:close" alternativeText="Reject" variant="border-filled" onclick="{!c.handleAddTaskAction}" name="{!index}"/>
    </div>
    </td>
</tr>

What I Would like to do is that when the Reject button above is clicked, rejectReasonPick field above should become mandatory (red highlighted). Once that value is populated, and reject is clicked record will be saved.

Here, wrapAccountList is a wrapper. Multiple records are present in the wrapper as a list. When reject corresponding to one record is clicked, the field corresponding to that record , only would be highlighted. I am really stuck in this one and any code snippet or solution would be really helpful

Answer 1

lightning:select has an attribute named as "required" that can be used to make it mandatory.

What you can do is assign a variable to that attribute and dynamically control it via your button's on click java-script controller.

<aura:attribute type="Boolean" name="isRequired" default="false"/>


<lightning:select name="rejectReasonPick" label="" value="{!arItem.acc.rejectReason}" required="{!v.isRequired}">

In your javascript's handleAddTaskAction just set the attribute isRequired as true

handleAddTaskAction : function(component,event,helper){
//Your rest code.

component.set("v.isRequired",true);
}

You have to add isRequiredField to be part of your wrapper variable to get it going.