0

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}));
}
  }
0

You are submitting the form using

this.template.querySelector('lightning-record-edit-form').submit(fields);

there is no variable fields in that handleClick() function also since you are not making any changes to fields you can simply submit it without using fields

this.template.querySelector('lightning-record-edit-form').submit();
| improve this answer | |
  • I was in assumption we need to provide fields in there. I was trying to send the field from parent to modal component and then back to handleClick() event. Your mention is rather simple. Thank you. But I am curious how can we send changed fields to modal component. I tried @track fields and passed it to child component. But I couldn't read in modal. Any thoughts – athi Aug 31 at 13:45

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.