[SalesForce] How to use Lightning-Record-Form onError to display custom error message

Let's say I have a Lightning-Web-Component that uses lightning-record-form like this:

 <lightning-record-form
    record-id={recordId}
    object-api-name="Opportunity"
    fields={myFields}
    columns="2"
    onerror={handleError}
    mode="view"}>
    </lightning-record-form>

and a corresponding javascript file with the following functions defined:

 handleError(event) {
        console.log("handleError event");
        console.log(JSON.stringify(event.detail));
    }

 showToast(theTitle, theMessage, theVariant) {
        const event = new ShowToastEvent({
            title: theTitle,
            message: theMessage,
            variant: theVariant
        });
        this.dispatchEvent(event);
    }

How do I prevent this from displaying the default error message?

enter image description here

I have tried using event.preventDefault(); and event.stopImmediatePropagation(); like this:

handleError(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    this.showToast("Error", event.detail.detail, "error");
}

Does anyone have any ideas about how to properly handle an error using lightning-record-form?
I don't want my users getting a big ugly error message that they cannot dismiss.

Best Answer

Okay, so thanks to @sfdcFox I realized that the error handling override in the lightning-record-form is not able to be canceled, so I just used a combination of lightning-record-edit-form and lightning-record-view-form and I just omitted the lightning-messages tag. I used a js variable called "editMode" to conditionally render lightning-input-field vs lightning-output-field. Then, I still use handleError() to parse the error message and display a closable error toast to the user.

<template>
<lightning-record-edit-form record-id={recordId} object-api-name="Opportunity" onerror={handleError}>
    <lightning-record-view-form record-id={recordId} object-api-name="Opportunity">
        <div class="slds-box">
            <lightning-card title="Opportunity Overview">
                <template if:true={editMode}>
                    <lightning-button variant="Neutral" label="Save" title="Save" type="submit"
                        icon-name="utility:save" slot="actions" class="slds-p-around_xxx-small"></lightning-button>
                    <lightning-button variant="brand" label="Cancel" title="Cancel" type="reset"
                        onclick={clearEditMode} icon-name="utility:undo" slot="actions"
                        class="slds-p-around_xxx-small"></lightning-button>
                </template>
                <template if:false={editMode}>
                    <lightning-button variant="brand" label="Edit" title="Edit" onclick={setEditMode}
                        icon-name="utility:edit" slot="actions" class="slds-p-around_xxx-small"></lightning-button>
                </template>
                <lightning-layout multiple-rows="true">
                        <lightning-layout-item size="6" padding="around-small">
                            <template if:true={editMode}>
                                <lightning-input-field field-name="name"></lightning-input-field>
                            </template>
                            <template if:false={editMode}>
                                    <lightning-output-field field-name="name"></lightning-output-field>
                                </template>
                        </lightning-layout-item>
                       <!-- ... repeat above for all fields... -->
                </lightning-layout>
            </lightning-card>
        </div>
    </lightning-record-view-form>
</lightning-record-edit-form>

Here is js controller:

@track editMode;

    connectedCallback() {
        this.editMode = false;
    }

    setEditMode(){
        this.editMode = true;
    }

    clearEditMode(){
        this.editMode = false;
    }

    handleError(event) {
        let message = event.detail.detail;
        //do some stuff with message to make it more readable
        message = "Something went wrong!";
        this.showToast(TOAST_TITLE_ERROR, message, TOAST_VARIANT_ERROR);
       this.clearEditMode();
    }
    showToast(theTitle, theMessage, theVariant) {
        const event = new ShowToastEvent({
            title: theTitle,
            message: theMessage,
            variant: theVariant
        });
     this.dispatchEvent(event);
    }
Related Topic