Handle error in Lightning Component using Lightning Data Service

Question

I am having a lightning component that uses the Lightning Data services. The component is like below which has a button which when clicking on it changes the case status to Closed.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >
<aura:attribute name="loaded" type="Boolean" default="false" />
<lightning:spinner variant="brand" alternativeText="Loading..." class="{!(v.loaded? 'slds-show': 'slds-hide')}" />
 <lightning:recordEditForm aura:id="form" 
        objectApiName="Case" 
        recordId="{!v.recordId}"
        onsubmit="{!c.handleSubmit}"
        onerror="{!c.handleError}"
        onsuccess="{!c.handleSuccess}">
         <!--<lightning:spinner aura:id="spinner" variant="brand" /> -->
        <lightning:inputField aura:id="statusInput" fieldName="Status" class="slds-hide" />
        <lightning:button variant="brand" type="submit" label="Close Case(LDS)" />
 </lightning:recordEditForm>    
</aura:component>

And controller

({
    handleSubmit: function(component, event, helper) {
        component.set('v.loaded',true);
        event.preventDefault();      
        var fields = event.getParam('fields');
        fields.Status = 'Closed';
        console.log(JSON.stringify(fields)); 
        component.find('form').submit(fields); 
        
    },
    
    handleError: function(component, event, helper) {
        component.set('v.loaded',false);
        $A.get("e.force:showToast")
        .setParams({
            type: 'error',
            mode: 'pester',
            message: 'Case cannot be closed, please verify the required fields like Category are filled !!' }).fire();  
    },
    
    handleSuccess: function(component, event, helper) {
        component.set('v.loaded',false);
            $A.get("e.force:showToast")
            .setParams({
            type: 'success',
            message: 'Case is closed!',
            mode: 'pester'
            })
        .fire();
    }
})

I am currently in the handleError hard coding the error message but I am trying to get the errors from the Validation/ if something goes wrong instead of hard coding the errors. I tried to get the error

    var error = event.getParams();
    // Get the error message
    var errorMessage = event.getParam("message"); 

and give it in the message it just gives the generic error message in the toast like instead I should be getting the validation error

A Category is required to close the case.

How to get the Validation errors in to the lightning component from the Lightning Data Services.

Answer 1

You're on the right track with event.getParams();. The property that hold the error message you're seeking depends on the location of the error defined in your validation rule.

If the error is to appear on a field, the error messages can be found in event.getParam('output').fieldErrors - an object of field errors.

Example:

const fieldErrors = event.getParam('output').fieldErrors;
const separator = ' ';

let message = Object.values(fieldErrors).map(field => {
    return field.map(error => error.message).join(separator);
}).join(separator);

$A.get("e.force:showToast").setParams({
    type: 'error',
    mode: 'pester',
    message: message 
}).fire();

If the error is to appear on the top of the page, the error message can be found in event.getParam('detail') or event.getParam('output').errors - an array of errors.

Answer 2

onerror is a built-in event of lightning:recordEditForm. So to read the events you must use the event like var err = event.getParam("error");. This returns an object which has

• message: General description of error.
• detail: Description of error details, if any.
• output: Record exception errors with errors and fieldErrors properties. For example, to return the error details when a required field is missing, use event.getParam("output").fieldErrors.
• error: Returns the status code via status and statusText properties.

Alternatively you can consider using <lightning:messages/> in the component which will automatically display the errors. lightning:messages displays the message, and the detail or fieldErrors record exception message if it's available.

You can find more details here