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.