LWC: lightning-record-edit-form — set or modify field values onsubmit


Sometimes you need to execute code before submitting the form and set or modify some fields on sObject.

For example, you have the following lightning-record-edit-form for Account sObject.

<lightning-record-edit-form object-api-name="Account" 
                            onsubmit={onSubmitHandler>
<div class="slds-grid slds-wrap slds-gutters">
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field field-name="Name" variant="label-stacked"></lightning-input-field>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <lightning-input-field field-name="Phone" variant="label-stacked"></lightning-input-field>
    </div>
</div>
</lightning-record-edit-form>

To modify some fields you can use onsubmit handler. You can get created/updated sObject from the event object. After the modifications, you need to submit the form.

onSubmitHandler(event) {
    event.preventDefault();
    // Get data from submitted form
    const fields = event.detail.fields;
    // Here you can execute any logic before submit
    // and set or modify existing fields
    fields.Name = fields.Name + fields.Phone
    // You need to submit the form after modifications
    this.template
        .querySelector('lightning-record-edit-form').submit(fields);
}

I and our TrueSalesSoft team can help you with any questions related to Salesforce custom development. You can use Contact page on truesalessoft.com.