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?
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.Here is js controller: