0

I have a lightning component like the below,

<aura:component description="GDPR_Settings_Configuration" implements="force:appHostable">
<aura:attribute name="gdprSetting" type="Object" description="The GDPR Configuration setting" />

<aura:handler name="init" value="{!this}" action="{!c.handleInit}" />

<lightning:card title="GDPR Auto Processing Configuration">
        <br/>
        <div class="slds-grid slds-wrap slds-col_padded slds-m-horizontal--small">
            <div class="slds-col slds-size_1-of-3 slds-m-bottom_small">Condition</div>
            <div class="slds-col slds-size_1-of-3 slds-m-bottom_small">Year value to build query to satisfy respected condition.</div>
            <div class="slds-col slds-size_1-of-3 slds-m-bottom_small"></div>
            <div class="slds-col slds-size_1-of-3 slds-m-bottom_small">
                <lightning:input label="Contacts Agreement Condition" name="contactsAgreementCondition" type="checkbox" value="{!v.gdprSetting.Contacts_Agreements_Condition__c}" checked="{!v.gdprSetting.Contacts_Agreements_Condition__c}" />
            </div>
            <div class="slds-col slds-size_1-of-3 slds-m-bottom_small">
                <lightning:input type="number" min="1" label="Contacts Agreement Year Value" name="contactsAgreementYearValue" value="{!v.gdprSetting.Agreements_Year_Value__c}" placeholder="Contacts Agreement Year Value" variant="label-hidden" disabled="{!v.gdprSetting.Contacts_Agreements_Condition__c == true ? false : true}" required="{!v.gdprSetting.Contacts_Agreements_Condition__c == true ? true : false}"/>
            </div>
         </div>
</lightning:card>
<div class="slds-text-align_right slds-m-horizontal_x-large">
        <lightning:button name="save" label="SAVE" onclick="{!c.updateGDPRDetails}" variant="brand" />
</div>
</aura:component>

In the above code, I have a front end validation as if the contactsAgreementCondition is true then the contactsAgreementYearValue value should be required.

But in the front end, the validation always takes as follows,

When I checked contactsAgreementCondition,

enter image description here

When I uncheck the contactsAgreementCondition value also show the same error in the front-end.

enter image description here

What I missed here?

2

This is a problem with 2-way binding so you need to trigger the check on change of checkbox:

<div class="slds-col slds-size_1-of-3 slds-m-bottom_small">
            <lightning:input label="Contacts Agreement Condition" 
                             onchange="{!c.checkIfRequired}" 
                             name="contactsAgreementCondition" 
                             type="checkbox" 
                             checked="{!v.gdprSetting.Contacts_Agreements_Condition__c}" />
        </div>
        <div class="slds-col slds-size_1-of-3 slds-m-bottom_small">
            <lightning:input aura:id="contactsAgreement" 
                             type="number" 
                             min="1" 
                             label="Contacts Agreement Year Value" 
                             name="contactsAgreementYearValue" 
                             placeholder="Contacts Agreement Year Value" 
                             variant="label-hidden" 
                             disabled="{!!v.gdprSetting.Contacts_Agreements_Condition__c}" 
                             required="{!v.gdprSetting.Contacts_Agreements_Condition__c}"/>
        </div>

In JS:

checkIfRequired : function(component, event, helper) {
    component.find("contactsAgreement").reportValidity();
}

Note: 2-way binding does not work properly and so we have many fixes in AURA framework. After a while, LWC came up which is one way binding for this reason.

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