function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sagar DumbreSagar Dumbre 

Override custom error event in record edit form in lightning web component

I am trying to dispatch an error event in the lighting record edit form through javascript. Below is my code sample. I would like to highlight the error field with the error message. I am able to get a response in the handleError method however my fields are not getting highlighted with the error message.
Any idea what I am missing? Thanks. 
<lightning-record-edit-form object-api-name="Loan_Application__c" onerror={handleError} record-id={recordId} >
	<lightning-messages> </lightning-messages>                
	<lightning-input-field field-name="Legal_Entity__c"></lightning-input-field>
</lightning-record-edit-form>

JS:

onButtonClick(event){
	event.preventDefault();        
    const forms = this.template.querySelector('lightning-record-edit-form');
    if (forms) {      
      forms.dispatchEvent(
        new CustomEvent('error', {
          detail: {
            output: {
              errors: [],
              fieldErrors: {                
                Legal_Entity__c: [
                  {
                    constituentField: null,
                    duplicateRecordError: null,
                    errorCode: 'FIELD_CUSTOM_VALIDATION_EXCEPTION',
                    field: 'Legal_Entity__c',
                    fieldLabel: 'Legal Entity',
                    message: 'Please provide your legal entity type.',
                  },
                ],
              },
            },
          },
        })
      );
    }
}

handleError(event) {    
	console.log('OUTPUT => ', JSON.stringify(event.detail));
}

 
ravi soniravi soni
Hi sagar,
User-added image

I think you want like above screen. when you click on button if any custom validation is active on field then show on screen and do highLight
the field.

If you want something like this then try following code. 
<template>
    <lightning-record-edit-form record-id={recordId}
                                object-api-name="Contact">
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name="AccountId">
        </lightning-input-field>
        <lightning-input-field field-name="FirstName">
        </lightning-input-field>
        <lightning-input-field field-name="LastName">
        </lightning-input-field>
        <lightning-input-field field-name="Email">
        </lightning-input-field>
        <lightning-button
            class="slds-m-top_small"
            variant="success"
            type="submit"
            name="update"
            label="Update">
        </lightning-button>
    </lightning-record-edit-form>
</template>
Please let me know if it's helps you, do mark this answer as best so that others facing the same issue will find this information useful.
Thank you

 
Sagar DumbreSagar Dumbre
Hi Veer,
That is exactly what I am trying to achieve. However, I do not want the form to be submitted and get the validation messages from the server, Instead, I would like to do in a javascript way. I guess this is possible if we can override the error custom event.