Edit a Record

The simplest way to create a form that enables you to edit a record is to use lightning-record-form. To customize the form layout or preload custom values, use lightning-record-edit-form.

To edit a record, use the record-id and object-api-name attributes. When you provide a record ID, the component uses view mode by default, which displays output fields with edit icons. If you click an edit icon, all updateable fields in the form become editable. The editable form displays a Save button that updates the record, and a Cancel button that reverts changes.

The component provides default submit and error handlers. Errors are automatically displayed at the top of the form.

This example creates a form that lets users update fields from the compact layout on an account record. It displays the fields in a two-column layout.

Place this example on a record page to inherit its record-id and object-api-name properties.

You can override the default form behavior using custom events, such as displaying a toast when the submission succeeds or fails. For more information, see the lightning-record-form reference documentation.

You can specify which fields appear on the editable form, either by providing an array of field names or importing references to the fields.

This example uses the recordFormStaticContact component in the github.com/trailheadapps/lwc-recipes repo. It displays an editable form for a record using a static schema definition.

Import the field references in your JavaScript file.

To provide a custom layout for your form fields, use the lightning-record-edit-form component. Pass in the fields to lightning-input-field, which displays an input control based on the record field type. This example displays several fields using a custom layout. Add this example component to a contact record page to inherit its record-id and object-api-name properties.

lightning-record-edit-form handles form submission and errors automatically. To display an error message above or below the form fields automatically, include lightning-messages before or after your lightning-input-field components.

lightning-record-edit-form doesn’t provide its own Cancel and Save buttons like lightning-record-form does. To create your own Cancel button that reverts the field values, include a lightning-button component that calls the reset() method. Replace the record-id with your own, or place this example on a contact record page to inherit its record-id property.

Call the reset() method on the lightning-input-field component.

lightning-record-edit-form handles form submission and errors automatically. To display an error message above or below the form fields automatically, include lightning-messages before or after your lightning-input-field components.

lightning-record-edit-form enables you to handle the following custom events.

• error—Fired when the form returns a server-side error.
• load—Fired when the form loads record data.
• submit—Fired when the form is submitted.
• success—Fired when the form data saves successfully.

This example displays a toast when an error occurs on form submission. Common errors include no network access or a required field is missing from the form. Use your own record ID or place the example on a contact record page to inherit its record ID.

To display a toast, import the lightning/platformShowToastEvent module.

event.detail.message returns a general description of the error. To return field-specific errors such as an error from a validation rule, use event.detail.output.fieldErrors, which provides a list of fields and record exception errors.

Let’s say you encounter validation rule errors in the FirstName, LastName, and Email fields, event.detail.output.fieldErrors can return something like this.

For more information, see the lightning-record-edit-form reference documentation.

We recommend that you create validation rule errors to enforce field validation using lightning-input-field nested in lightning-record-edit-form, as discussed in Override Default Behaviors Using Custom Events.

lightning-input-field doesn’t support client-side custom validation. If you want to implement your own client-side validation, consider using lightning-input nested in lightning-record-edit-form instead.

Place this example on an account record page. This example wires up a lightning-input component to the Name field for editing.

Wire up the lightning-input component to the Salesforce field using the getRecord wire adapter and provide your own label. The wiring is done automatically when you use lightning-input-field, but not when you use lightning-input. Submit the record data using the onsubmit event handler on lightning-record-edit-form. In the event handler, perform the validation check using setCustomValidity() and update the fields with the user input value.

lightning-input provides attributes for custom validation, such as min, max, and pattern. For more information, see the lightning-input reference documentation.