0

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!

1 Answer 1

0

In the child picklist tag, you have the following:

value="{!v.objDetail.Interaction_Reason__c}"

I believe this is automatically setting a value for this picklist (which is different than the first entry in v.listDependingValues). So, this could be the possible reason for the lightning:select component being valid (regardless).

However, in the parent picklist tag, value of v.taskFields[0].Call_Result__c & the first entry of v.callResultOptions could be the same. So, no issues show up there.

The above mentioned is just my guess and the actual troubleshooting needs to be done based on the values passed to the base component. As such I don't see any flaw in the JS code.

4
  • I have updated my question, I can able to set the child field as required but it is not getting validated on save. Page isnt throwing any error on Save. Please suggest
    – SK_112
    Commented Aug 26, 2020 at 11:46
  • I can't see onControllerFieldChange wired up in the child picklist html. Could you check if you have posted the correct updated code?
    – arut
    Commented Aug 26, 2020 at 11:49
  • @atul, my bad, i missed it and will be updating the question. Also, for your answer above, v.listDependingValue and v.callResultOptions has all the picklist values and v.objDetail.Interaction_Reason__c and v.taskFields[0].Call_Result__c holds the values that i select. First one is the array holding all the values and second one is setting the selected value.
    – SK_112
    Commented Aug 26, 2020 at 11:56
  • May be I was not clear in my answer. I actually wanted you to look at the values of v.objDetail.Interaction_Reason__c and v.taskFields[0].Call_Result__c during init. Also, in an afterRender function, could you run the following code snippet and check the output? component.find("taskform").forEach(inputCmp => { console.log(inputCmp.get("v.value"))});
    – arut
    Commented Aug 26, 2020 at 13:44

You must log in to answer this question.

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