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
.
If you need more flexibility than these components provide, see Build Custom UI to Create and Edit Records.
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.
To improve performance, specify fields instead of a layout whenever possible. Specify a layout only when you want the administrator, not the component, to control the fields that are provisioned. The component must handle receiving every field that is assigned to the layout for the context user.
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.
Passing in the object and fields using strings doesn’t provide compile-time validation. You don’t know if the fields are valid until runtime. We recommend importing references to objects and fields from @salesforce/schema
.
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.
lightning-input-field
is the preferred component to use with lightning-record-edit-form
. Use lightning-input
with lightning-record-edit-form
only if validation rule errors don’t meet your requirements.