Lightning Data Service (Lightning record Edit Form)

Lightning record edit form

Use the lightning-record-edit-form component to create a form that's used to add a Salesforce record or update fields in an existing record. The component displays fields with their labels and the current values and enables you to edit their values.

lightning-record-edit-form supports the following features.

• Editing a record’s specified fields, given the record ID.
• Creating a record using specified fields.
• Customizing the form layout
• Custom rendering of record data

lightning-record-edit-form implements Lightning Data Service and doesn't require additional Apex controllers to create or update record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

objects that support Lightning record Edit Form

This component doesn’t support all Salesforce standard objects. For example, the Event and Task objects are not supported. This limitation also applies to a record that references a field that belongs to an unsupported object. External objects are not supported.

For more information of supported object please visit

Editing a Record

To enable record editing, pass in the ID of the record and the corresponding object API name to be edited. Specify the fields you want to include in the record edit layout using lightning-input-field.Include a lightning-button component with type="submit" to automatically save any changes in the input fields when the button is clicked.

<template>
    <lightning-record-edit-form record-id={recordId}
                                object-api-name={objectApiName}>
        <lightning-messages>
        </lightning-messages>
        <lightning-output-field field-name="AccountId">
        </lightning-output-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="brand"
            type="submit"
            name="update"
            label="Update">
        </lightning-button>
    </lightning-record-edit-form>
</template>

Creating a Record

To enable record creation, pass in the object API name for the record to be created. Specify the fields you want to include in the record create layout using lightning-input-field components. Do not pass the record id.

<template>
    <lightning-record-edit-form object-api-name="Contact">
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name="Name">
        </lightning-input-field>
            <lightning-button
                class="slds-m-top_small"
                type="submit"
                label="Create new">
            </lightning-button>
    </lightning-record-edit-form>
</template>

Returning the Record Id

A record Id is generated when a record is created successfully. To return the Id, use the onsuccess handler. This example shows an Id field that's populated when you create an account by providing an account name and pressing the Create Account button.

<template>
    <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
        <lightning-messages></lightning-messages>
        <div class="slds-m-around_medium">
            <lightning-input-field field-name='Id' value={accountId}></lightning-input-field>
            <lightning-input-field field-name='Name'></lightning-input-field>
            <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Create Account">
                </lightning-button>
           </div>
       </div>
    </lightning-record-edit-form>
</template>

The record Id of the newly created account is assigned to the accountId property.

import { LightningElement } from 'lwc';

export default class createRecordForm extends LightningElement {
   accountId;
   handleSuccess(event) {
       this.accountId = event.detail.id;
   }
}

Overriding Default Behaviors

To customize the behavior of your form when it loads or when data is submitted, use the onload and onsubmit attributes to specify event handlers. If you capture the submit event and submit the form programmatically, use event.preventDefault() to cancel the default behavior of the event. This prevents a duplicate form submission.

handleSubmit(event){
   event.preventDefault();       // stop the form from submitting
   const fields = event.detail.fields;
   fields.Street = '32 Prince Street';
   this.template.querySelector('lightning-record-edit-form').submit(fields);
}
handleSucess(event){
   const updatedRecord = event.detail.id;
   console.log('onsuccess: ', updatedRecord);
}

To see all the response data:

handleSuccess(event){
    const payload = event.detail;
    console.log(JSON.stringify(payload));
}

Resetting the Form

To reset the form fields to their initial values, use the reset() method on lightning-input-field.

Call the reset() method on each field.

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

visit Lightning Record view form here.