Required attribute not working lightning:input rerender

Question

I 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.

Answer 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