0

I Created a component which consists of a form with a group of fields. The form contains 5 fields. Out of 5 fields, 4 are mandatory. If the user clicks on the save button without entering data into the required fields, it is showing error messages. Now, if I click on the cancel button, all error messages should be removed.

Component:

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" access="global" >
<aura:attribute name="isVisible" type="String" default="0"/>

<div class="{!v.isVisible == '1' ? 'slds-show' : 'slds-hide'}" style="height: 640px;">
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container ipad-height">
            <header class="slds-modal__header" style="background: rgb(255, 14, 73);color: #FFFFFF;padding: 1rem">
                <button style="top: -2rem;font-size: 20px;" class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="{!c.cancel}">X</button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium">COMPUTERS SERVERS AND WORKSTATIONS ISSUE FORM</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium">
                <lightning:layoutItem >
                    <lightning:input class="formitem" aura:id="sw-f1-req" type="text" name="Franchisee Name" label="Franchisee Name" required="true"/> 
                </lightning:layoutItem>

            <lightning:layoutItem >
                <lightning:select class="formitem" aura:id="sw-f1-req" name="select1" label="Best Way to Reach you" required="true">
                    <option value="">select one option</option>
                    <option value="1">Home Phone</option>
                    <option value="2">Mobile Phone</option>
                    <option value="3">Work Phone</option>
                    <option value="4">Email</option>
                </lightning:select>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <lightning:select class="formitem" aura:id="sw-f1-req" name="select2" label="Please Select Your Location Center" required="true">
                    <option value="">select the center</option>
                    <option value="1">Center1</option>
                    <option value="2">Center2</option>
                    <option value="3">Center3</option>
                    <option value="4">Center4</option>
                </lightning:select>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <lightning:select class="formitem" name="select3" aura:id="sw-f1-req" label="What computer are you experiencing trouble with?" required="true">
                    <option value="">select the computer</option>
                    <option value="1">C1</option>
                    <option value="2">C2</option>
                    <option value="3">C3</option>
                    <option value="4">C4</option>
                </lightning:select>
            </lightning:layoutItem>
            <lightning:layoutItem >
                <lightning:textarea class="formitem" name="myTextArea" value="Enter the details of the issue" label="Please give a detailed description of the issue you are receiving" />
            </lightning:layoutItem>

        </div>
            <footer class="slds-modal__footer">
                <button style="background-color: rgb(255, 14, 73);color: #FFFFFF" class="slds-button slds-button_neutral" onclick="{!c.save1}">SUBMIT</button>
                <button style="background-color: rgb(255, 14, 73);color: #FFFFFF" class="slds-button slds-button_neutral" onclick="{!c.cancel}">CANCEL</button>
            </footer>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" style="background-size:cover;background-image: url('http://www.waxcenter.com/images/background-reservation.jpg')"></div>
</div>

JS Controller:

({
save1 : function(component, event, helper) {
    var allValid = component.find('sw-f1-req').reduce(function (validSoFar, inputCmp) {
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && !inputCmp.get('v.validity').valueMissing;
    }, true);
    if(allValid)
    {
        //invoke apex controller
    }
},
cancel : function(component, event, helper) {

    component.set('v.isVisible','0');
}
})

Please help me to resolve it.

0

Instead of using a visible flag, try dynamically creating and destroying the component. I forget where I read it but I believe this is the recommended way of accomplishing this.

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.