HTML
<template>
<lightning-card>
<lightning-record-form object-api-name={objectApiName}
onsuccess = {handleSuccess}
fields={CONTACT_FIELDS}>
</lightning-record-form>
</lightning-card>
</template>
JS
import { LightningElement} from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/contact.Email';
import {showToastEvent } from 'lightning/platformShowToastEvent'
export default class ContactCreator extends LightningElement {
objectApiName = CONTACT_OBJECT;
CONTACT_FIELDS = [FIRST_NAME_FIELD,LAST_NAME_FIELD,EMAIL_FIELD];
handleSuccess(event){
const toastEvent = new showToastEvent({
title: "Contact Created",
message: event.detail.id,
variant: "success"
});
this.dispatchEvent(toastEvent);
}
}
Now when I use the component to create a contact record I receive the following error:
[NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:1025:196
{anonymous}()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:1025:389
dispatchEvent()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:21:32794
P.dispatchEvent()@https://static.lightning.force.com/ap27/auraFW/javascript/nj61v-uP3bGswhb-VTdr6Q/aura_prod.js:21:8008
P.handleSuccess()@https://resourceful-raccoon-s4pqyc-dev-ed.lightning.force.com/components/lightning/recordForm.js:1:7969
I already am using event.detail correctly so what am I missing?
JavaScript is case sensitive so when you are importing import {showToastEvent } from 'lightning/platformShowToastEvent' make sure that you use import {ShowToastEvent } from 'lightning/platformShowToastEvent' ( Capital 'S' )
import { LightningElement} from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRST_NAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LAST_NAME_FIELD from '@salesforce/schema/contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/contact.Email';
import {ShowToastEvent } from 'lightning/platformShowToastEvent'
export default class Test1 extends LightningElement {
objectApiName = CONTACT_OBJECT;
fields = [FIRST_NAME_FIELD,LAST_NAME_FIELD,EMAIL_FIELD];
handleSuccess(event) {
const evt = new ShowToastEvent ({
title: 'Contact created',
message: 'Record ID: ' + event.detail.id,
variant: 'success',
});
this.dispatchEvent(evt);
}
}