0

enter image description hereI am facing an issue with below code. Required attribute on lightning:input is not working on rerender. I have an inputCheckbox and I render the lightning:input field upon checkbox selection. This is working fine and page is throwing an error when field is not updated with a value and click on Submit button. problem is uncheck the checkbox -> Check it again -> lightning input rendered -> Did not enter any value -> click submit -> validation does not trigger and no error.

Page:

<div class="rootDiv">
    <div class="slds-text-body_small" style="display:flex;">
        <lightning:layout horizontalAlign="left">
            <lightning:layoutItem size="12">
                <div style="margin-left:0px !important;">
                    <ui:inputCheckbox aura:id="ProjectInfoId" value="{!v.case.field__C}"
                                      change="{!c.hideAndShowSection4}"/>
                    <aura:unescapedHtml value="label"/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    <br/>
    <aura:renderIf isTrue="{!v.showhideSection4elements}">
        <div class="slds-size_2-of-2">
            <div class="slds-text-body_small">
                <aura:unescapedHtml value="{!$Label.c.labelValue}"/>
            </div>
            <br/>
            <div class="slds-form__row">
                <div class="slds-form__item" role="listitem">
                    <div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col">
                        <label class="slds-form-element__label slds-text-body_small">
                            <aura:unescapedHtml value="{!$Label.c.fieldLabelValue}"/>
                        </label>
                        <div class="slds-form-element__control slds-size_3-of-4">
                            <lightning:input aura:id="SecIVrequiredCheckID" class="field"
                                             value="{!v.case.customfield__c}" maxlength="255" required="true"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aura:renderIf>
    <div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col">
        <div style="text-align: center;">
            <button class="slds-button slds-button--brand" onclick="{!c.submitCase}">Submit</button>
        </div>
    </div>
</div>

Controller:

var projectSelected = component.get("v.case.DRMS_Is_this_Project_Request__c");
        if (projectSelected) {
            var allValid = component.find("SecIVrequiredCheckID").reduce(function (validSoFar, inputCmp) {
                inputCmp.showHelpMessageIfInvalid();
                return validSoFar && !inputCmp.get("v.validity").valueMissing;
            }, true);

            if (allValid) {
                return true;
            } else {
                //validation errors
            }
        } else {
            return true;
        }

When I inspect the element in Dev tools, I found required attribute on lightning:input goes away on rerender.

This code runs on public site and I dont think that would affect the logic. Could you please help on this.

  • aura:renderIf is deprecated. Have you tried similar logic using aura:if? Does it present the same issue? – Chris Johnson Sep 25 '19 at 20:29
  • @ChrisJohnson. I have tried with aura:if and it resolved the issue. After looking at the aura:if docs, it says aura:if instantiates and renders the component where as aura:renderIf only renders the component. i have updated all my logic with aura:if .Thanks much. – Ram Gunnam Sep 26 '19 at 16:44
  • @ChrisJohnson. Could you please write up an answer for this. – Ram Gunnam Sep 30 '19 at 13:10
1

Ram,

aura:renderIf is deprecated... Salesforce recommends using aura:if instead. As you mentioned, aura:if instantiates and renders the component. aura:renderIf only renders it.

For those that may read this later... on the flip side of this... if you would like to have an object instantiated but don't want it rendered, you can do so with CSS classes. Create a class that has "display:none". You can then use attribute binding or Javascript to add/remove the class from the element you wish to make visible/hidden. This can come in handy when you don't want to dynamically create a component on the page but still need access to its attributes/methods right away.

Chris

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.