[SalesForce] LWC edit form invoking Modal popup dialog

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}> &nbsp; 
      </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}> &nbsp; 
   </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}));
}
  }