0

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);
 }
5
  • I have done similar work and added custom validation code. You can check complete code here: newstechnologystuff.com/2020/04/28/… Aug 28, 2020 at 6:34
  • This is awesome. I just started reading it.
    – athi
    Aug 28, 2020 at 17:34
  • @Tushar Sharma , Basically I want to perform user validation before submitting . This require popup LWC to ask for user confirmation. I can able to perform this popup LWC in different simple parent component. However the modal component is not working with any button click in record-edit-form. Is it possible to invoke modal/popup LWC from lightning record-edit-form at all?
    – athi
    Aug 28, 2020 at 21:25
  • yes its possible to call it. Check if your experience support the modal Aug 29, 2020 at 7:45
  • @Tushar Sharma It worked in simple parent child component. But not in Edit form. I have created another post for it. Can you please help with answer for salesforce.stackexchange.com/questions/318203/…
    – athi
    Aug 31, 2020 at 0:36

1 Answer 1

0

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

1
  • Appreciate your response. It make sense and worked.
    – athi
    Aug 28, 2020 at 13:43

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.