2

Problem : In lightning-record-edit-form handleSubmit is not getting called

Details : Below is the code and when user clicks on "Update Opportunity" record is getting saved but nor handleSubmit nor handleSuccess is getting fired.


HTML

<template>
    <lightning-card  title="Opportunity Update">
        <lightning-record-edit-form object-api-name="Opportunity" record-id="<HardCodedId>">
            <lightning-messages>
            </lightning-messages>

            <lightning-input-field field-name="Name"></lightning-input-field>
            <lightning-input-field field-name="AccountId"></lightning-input-field>
            <lightning-button
                    class="slds-m-top_small"
                    type="submit"
                    label="Update Opportunity">
            </lightning-button>
        </lightning-record-edit-form>
    </lightning-card>
</template>

JavaScript

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class updatedeal extends LightningElement {

   handleSubmit(event){
      event.preventDefault();       // stop the form from submitting
      const fields = event.detail.fields;
      console.log('Fields -->',fields);
      this.template.querySelector('lightning-record-edit-form').submit(fields);
   }

   handleSuccess(event) {
         const evt = new ShowToastEvent({
            title: 'Success',
            message: 'Opportunity is update successfully',
            variant: 'success'
         });
         this.dispatchEvent(evt);
   }
}       

If you have any pointer let me know.

1 Answer 1

5

I think it's just something minor. The lightning-record-edit-form tag is missing the onsucces and onsubmit attributes.

<lightning-record-edit-form object-api-name="Opportunity" record-id="<HardCodedId>" onsuccess={handleSuccess} onsubmit={handleSubmit} >
3
  • Ohhh..I missed this. Now I feel like stupid. Thank you very much. Aug 17, 2019 at 1:13
  • No problem. We've all been there :)
    – Kasper
    Aug 17, 2019 at 1:16
  • 1
    To the future google searcher (aka me :) ). Another easy to miss mistake that has caught us out a couple times is using a capital 'S' when defining the submit button type. Using <lighting-button type="Submit"> will not work....it must be all lowercase. type="submit" Oct 29, 2019 at 14:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .