0

Hello everybody I am currently working in a LWC form that shows a form and a js code that sends the user data to an apex code to validate the input values. And if there is any error it returns me a List on the contrary it returns me the id of a new record.

So when the user clicks the validate button if there is any error I want it to show me the Modal. I have being able to get here but I am struggling to manage the close X button in the right corner it is not closing the modal and taking me back to the form.

In the next .html code I have the two modals and the lwc form. The firs modal display when heyErrores is true meaning that the are some errors in the user data. And the second modal displays when hayNuevoPasoMensajeria is true cause the recordId was successfully created and brings me the url:

<template>
<div>
    <template if:true={hayErrores}>
        <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">
                    <header class="slds-modal__header">
                        <lightning-button-icon class="slds-modal__close" title="Close" icon-name="utility:close" icon-class="slds-button_icon-inverse" onclick={handleDialogClose}></lightning-button-icon>
                        <h2 class="slds-text-heading_medium slds-hyphenate header-string">Errores</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium slds-modal__content_headless" id="modal-content-id-1">
                        <slot>
                            <template for:each={listErrors} for:item="iError">
                                <li key={iError}>{iError}</li>
                            </template> 
                        </slot>
                    </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
    <template if:true={hayNuevoPasoMensajeria}>
        <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open">                
            <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <lightning-button-icon class="slds-modal__close" title="Close" icon-name="utility:close" icon-class="slds-button_icon-inverse" onclick={handleDialogClose}></lightning-button-icon>
                        <h2 class="slds-text-heading_medium slds-hyphenate header-string">Nuevo Paso de Mensajería</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium slds-modal__content_headless" id="modal-content-id-2">
                        <slot>
                            <div> url new record: {url}</div>
                        </slot>
                    </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
    <!--> From here to the next part of the code is the form-->
<lightning-card title="Solicitud de cambio de comercializador sin cambios" icon-name="utility:form" variant="--slds-c-card-footer-text-align">
 ....

in my js I have the next code:

 showModal = false;

 @api show() {
    this.showModal = true;
 }
 handleDialogClose() {
    this.showModal = false;
 }
 handleShowModal() {
    const modal = this.template.querySelector("c-modal-Popup");
    modal.show();
 }

The modal is successfully open but I can not manage the close button: enter image description here

Could anybody help me?

1 Answer 1

0

In the HTML I see no use of showModal, nor I see a child component c-modal-Popup, moreover its name is wrong since it couldn't have an uppercase character.
If it's just a single LWC you should get rid of unused code (showModal, handleShowModal, show) and handleDialogClose method should just set both hayNuevoPasoMensajeria and hayErrores to false:

handleDialogClose() {
    this.hayNuevoPasoMensajeria = false;
    this.hayErrores= false;
}

You must log in to answer this question.