I have a controlling picklist field called Interaction Result and dependent picklist called Interaction Reason which i am displaying in lightning component.
Now, I want to set the child field as mandatory only when it is enabled.
Below is the code that I tried so far to achieve this
Component:
Parent picklist tag:
<lightning:select aura:Id="taskform" required="true" class="dynamic" onchange="{!c.onControllerFieldChange}"
label="Interaction Result" name="callresult" value="{!v.taskFields[0].Call_Result__c}">
<aura:iteration items="{!v.callResultOptions}" var="item">
<option text="{!item.label}" value="{!item.value}" />
</aura:iteration>
</lightning:select>
Child Picklist tag:
<lightning:select name="dependentFld" value="{!v.objDetail.Interaction_Reason__c}"
label="Interation Reason"
aura:Id="taskform" required="true"
disabled="{!v.bDisabledDependentFld}">
<aura:iteration items="{!v.listDependingValues}" var="val">
<option value="{!val}">{!val}</option>
</aura:iteration>
</lightning:select>
Helper.js:
validateLeadForm: function(component) {
// Show error messages if required fields are blank
var allValid = component
.find("taskform")
.reduce(function(validFields, inputCmp) {
inputCmp.showHelpMessageIfInvalid();
return validFields && inputCmp.get("v.validity").valid;
}, true);
return allValid;
}
From the above component code, Parent field is succesfully rendered as required and getting validated on save but for child/dependent picklist, although, i have used the same aura:id tag in child picklist tag and required=true, on save, I am not getting any validation error. In display, it is showing as required with red mark, but on save, it isnt getting validated.
Can anyone please suggest the changes so that I can get the child picklist to be required on when it is enabled.
Thanks!