LWC Edit form failing to update

Question

Below code erroring out when i click submit. There is some modal pop message and validation needed before submit . So I need to cancel the default submit. It's failing on let fields = event.detail.fields; Please help.

   <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>

Js File

import { LightningElement,api,track } from 'lwc';

export default class NXLegalDetailsLWC extends LightningElement {
@api recordId;

   connectedCallback(){
    this.isEdit=false;
}

       handleSubmit(event) {
    console.log('onsubmit: '+ event.detail.fields);

}
handleSuccess(event) {
    const updatedRecord = event.detail.id;
    console.log('onsuccess: ', updatedRecord);
}

updateTL(event){
    event.stopPropagation();

// This must also suppress default submit processing
event.preventDefault();

// Set default values of the new instance.
let fields = event.detail.fields;


// Push the updated fields though for the actual submission itself
this.template.querySelector('lightning-record-edit-form').submit(fields);
 }

Answer 1

In your code, the event handlers defined by onsuccess={handleSuccess} onsubmit ={handleSubmit} are the ones that correspond to the success and submit events of the lightning-record-edit-form. This means that e.detail.fields inside these event handlers will contain all the required information (relevant to the fields).

button of type='submit' simply invokes the submit event for the lightning-record-edit-form. However, the presence of onclick={updateTL} in the button HTML overrides the submit event of the record edit form and the handleSubmit will never get called. Event object on this updateTL has details related to the button itself and nothing related to the record edit form. So, when you execute e.detail.fields inside this handler method, nothing is found and you are returned undefined.

Remove onclick={updateTL} from the button HTML and move the code in updateTL into handleSubmit. This should solve your error. Also, ensure that the button HTML is placed within record edit form (i.e., before the ending tag </lightning-record-edit-form>)