I am currently working on record-edit-form in LWC. Basically I want to perform user validation before submitting . This require popup LWC to ask for confirmation. I can able to perform this popup LWC in different simple parent component. However the modal component in LWC is not working with any button click in record-edit-form. Is it possible to invoke modal/popup LWC from lightning record-edit-form?
Update: Now I progressed to show popup window. However "Yes" on Modal window throw error on below line. this.template.querySelector('lightning-record-edit- form').submit(fields);
<template>
<div class ="slds-card" style="margin-top:-0.5%">
<lightning-record-edit-form record-id={recordId} object-api-name=TLine__c"
onsuccess={handleSuccess} onsubmit ={handleSubmit} >
<table class="slds-table_cell-buffer slds-table_bordered" style ="width:100%" >
<tbody>
<tr>
<td >
<label for="fid21">Status</label>
<div style="width:70%"><lightning-input-field id="fid21" field-
name="Status__c" variant="label-hidden" onchange={HandleInlineEdit}>
</lightning-input-field>
</div>
</td>
<td >
<label for="fid23">Legal Levy</label>
<div style="width:70%"><lightning-input-field id="fid23" field-
name="Date__c" variant="label-hidden" onchange={HandleInlineEdit}>
</lightning-input-field>
</div>
</td>
</tr>
</tbody>
</table>
<div class="slds-no-flex">
<div if:true ={isEditable} class="slds-align_absolute-center" style="padding:5px;">
<button class="slds-button slds-button_brand" type='submit' onclick=
{updateTL}>Save</button>
<button class="slds-button slds-button_neutral" onclick={canceledit}>Cancel</button>
</div>
<!-- Modal Reusable Child Component -->
<c-modal-util-l-w-c title='Confirmation Title'
message='Do you want to proceed?'
confirm-label='Yes'
cancel-label='No'
visible={isDialogVisible}
name="confirmModal"
onclosemodalclick={handleClick}>
</c-modal-util-l-w-c>
<!--Modal Reusable Child Component-->
</template>
JS parent: import { LightningElement,api,track } from 'lwc';
export default class NXLegalDetailsLWC extends LightningElement {
@api recordId;
connectedCallback(){ this.isEdit=false }
handleSubmit(event) {
event.stopPropagation();
// This must also suppress default submit processing
event.preventDefault();
// Set default values of the new instance.
let fields = event.detail.fields;
this.isDialogVisible = true;
}
handleClick(event){
if(event.target.name === 'confirmModal'){
//when user clicks outside of the dialog area, the event is dispatched
with detail value as 1
if(event.detail !== 1){
//you can do some custom logic here based on your scenario
if(event.detail.status === 'confirm') {
//do something
console.log('hereparent');
this.template.querySelector('lightning-record-edit-
form').submit(fields);
}else if(event.detail.status === 'cancel'){
//do something else
}
}
//hides the component
this.isDialogVisible = false;
this.isEdit=false;
}
}
Popup Modal Child Component: ModalUtilLWC
<template>
<!-- Modal/Popup Box Utility LWC -->
<lightning-card if:true={visible}>
<div class="slds-container_small">
<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">
<!-- Modal/Popup Box LWC header here -->
<header class="slds-modal__header">
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{title}
</h2>
</header>
<!-- Modal/Popup Box LWC body starts here -->
<div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
<p>{message}</p>
</div>
<!-- Modal/Popup Box LWC footer starts here -->
<footer class="slds-modal__footer">
<lightning-button variant="neutral"
name="cancel"
label={cancelLabel}
title={cancelLabel}
onclick={handleClick} ></lightning-button>
<lightning-button variant="brand"
name="confirm"
label={confirmLabel}
title={confirmLabel}
onclick={handleClick} ></lightning-button>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</lightning-card>
</template>
JS child: import {LightningElement, api} from 'lwc';
export default class ConfirmationDialog extends LightningElement {
@api visible; //used to hide/show dialog
@api title; //modal title
@api name; //reference name of the component
@api message; //modal message
@api confirmLabel; //confirm button label
@api cancelLabel; //cancel button label
//handles button clicks
handleClick(event){
//creates object which will be published to the parent component
let finalEvent = {
// can add any information here to pass to parent component
status: event.target.name
};
//dispatch a 'click' event so the parent component can handle it
this.dispatchEvent(new CustomEvent('closemodalclick', {detail: finalEvent}));
}
}
