Lightning Web Components Clear Lightning-Messages

Question

Let's say I have a Lightning Web Component which looks like this:

    <template>
        <lightning-record-edit-form object-api-name="Opportunity" onsuccess={handleSuccess}>
            <lightning-messages></lightning-messages>
            ...
         </lightning-record-edit-form>
    </template>

If an apex exception occurs, I get an error message displayed like this:

How do I clear this message from the UI? I have tried <lightning-messages closable="true"> and that does not seem to work. Any thoughts?

Answer 1

Okay, to solve this problem I 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 use handleError() onerror 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);
}

Answer 2

This can be achieved using the if:true|false={lwcVar} directive markup in the LWC HTML: Render DOM Elements Conditionally

The markup in your HTML can be something like this:

<template>
    <lightning-record-edit-form ...>
        <lightning-messages if:false={closeError}></lightning-messages>

        <!-- input / output fields -->

        <lightning-button label="Cancel" onclick={handleReset}></lightning-button>
        <lightning-button type="submit" name="save" label="Save"></lightning-button>

    </lightning-record-edit-form>
</template>

Then your LWC JS can contain:

import { LightningElement, api } from 'lwc';

export default class RecordDetail extends LightningElement {
    @api recordId;
    closeError = false;

    renderedCallback() {
        if (this.closeError) {
            this.closeError = false;
        }
    }

    handleReset() {
        const inputFields = this.template.querySelectorAll('lightning-input-field');
        if (inputFields) {
            inputFields.forEach(field => {
                field.reset();
            });
        }
        this.closeError = true;
    }
}