LWC Edit a Record

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.

Edit a Record with Fields from a Layout Using lightning-record-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.

<template>
    <lightning-record-form
        record-id={recordId}
        object-api-name={objectApiName}
        columns="2"
        mode="edit"
        layout-type="Compact">
    </lightning-record-form>
</template>

Note 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.

import { LightningElement, api } from 'lwc';
export default class MyComponent extends LightningElement {
    @api recordId;
    @api objectApiName;
}

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.

Edit a Record with Specific Fields Using lightning-record-form

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

Note 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.

<template>
    <lightning-record-form
        object-api-name={objectApiName}
        record-id={recordId}
        fields={fields}></lightning-record-form>
</template>

Import the field references in your JavaScript file.

import { LightningElement, api } from 'lwc';

import ACCOUNT_FIELD from '@salesforce/schema/Contact.AccountId';
import NAME_FIELD from '@salesforce/schema/Contact.Name';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
import PHONE_FIELD from '@salesforce/schema/Contact.Phone';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class RecordFormStaticContact extends LightningElement {
    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api objectApiName;

    fields = [ACCOUNT_FIELD, NAME_FIELD, TITLE_FIELD, PHONE_FIELD, EMAIL_FIELD];
}

Edit a Record with a Custom Layout Using lightning-record-edit-form

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.

<template>
    <lightning-record-edit-form
        object-api-name={objectApiName}
        record-id={recordId}>
    <lightning-messages></lightning-messages>
    <div class="slds-grid">
        <div class="slds-col slds-size_1-of-2">
            <lightning-input-field field-name="Name"></lightning-input-field>
            <lightning-input-field field-name="Title"></lightning-input-field>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <lightning-input-field field-name="Phone"></lightning-input-field>
            <lightning-input-field field-name="Email"></lightning-input-field>
        </div>
    </div>
    <div class="slds-m-top_medium">
        <lightning-button type="submit" variant="brand" label="Edit Contact"></lightning-button>
    </div>
</template>

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.

Reset the Form to the Original Field Values

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.

<template>
    <lightning-record-edit-form 
        record-id={recordId}
        object-api-name="Contact">
            <lightning-messages></lightning-messages>
            <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-input-field field-name="Phone"></lightning-input-field> 
            <div class="slds-align_absolute-center slds-p-around_medium">
                <lightning-button class="slds-m-around_xx-small" label="Cancel" onclick={handleReset}></lightning-button>
                <lightning-button class="slds-m-around_xx-small" label="Create Contact" type="submit" variant="brand" ></lightning-button>
            </div>
    </lightning-record-edit-form>
</template>

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

import { LightningElement } from 'lwc';

export default class FormResetExample extends LightningElement {

    @api recordId;

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

Override Default Behaviors Using Custom Events

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.

<template>
    <lightning-record-edit-form
            record-id={recordId} 
            object-api-name="Contact"
            onerror={handleError}>
            <!--lightning-messages not needed here
                since we’re displaying a toast with the error message -->
            <!--<lightning-messages></lightning-messages>-->
            <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-input-field field-name="Phone"></lightning-input-field> 
            <lightning-button type="submit" variant="brand" label="Create Contact"></lightning-button>    
        </lightning-record-edit-form>
</template>

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

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class FormErrorExample extends LightningElement {

    @api recordId;

    handleError(event){
        console.log(event.detail);
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error creating record',
                message: event.detail.message,
                variant: 'error',
            }),
        );
    }
}

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.

{
  "Email": [
    {
      "constituentField": null,
      "duplicateRecordError": null,
      "errorCode": "FIELD_CUSTOM_VALIDATION_EXCEPTION",
      "field": "Email",
      "fieldLabel": "Email",
      "message": "Enter a Salesforce email"
    }
  ],
  "Name": [
    {
      "constituentField": "FirstName",
      "duplicateRecordError": null,
      "errorCode": "FIELD_CUSTOM_VALIDATION_EXCEPTION",
      "field": "Name",
      "fieldLabel": "First Name",
      "message": "Your first name should contain at least 2 characters"
    },
    {
      "constituentField": "LastName",
      "duplicateRecordError": null,
      "errorCode": "FIELD_CUSTOM_VALIDATION_EXCEPTION",
      "field": "Name",
      "fieldLabel": "Last Name",
      "message": "Your last name should contain at least 2 characters"
    }
  ]
}

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

Edit a Record with Custom Validation Using lightning-record-edit-form

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.

<!-- recordEditFormStaticAccount.html -->
<template if:true={account.data}>
    <lightning-record-edit-form object-api-name={objectApiName} 
            record-id={recordId}
            onsubmit={handleSubmit}>
        <lightning-input label="Name" 
                value={name} 
                onchange={handleChange}
                class="slds-m-bottom_x-small"></lightning-input>

        <lightning-button class="slds-m-top_small"
                 type="submit"
                 label="Update Account Name">
        </lightning-button>
    </lightning-record-edit-form>
</template>

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.

// recordEditFormStaticAccount.js
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = ['Account.Name'];

export default class RecordEditFormStaticAccount extends LightningElement {

    @api recordId;
    @api objectApiName; 
    inputVal = '';

    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    account;

    get name() {
      return this.account.data.fields.Name.value;
    }

    handleChange(event) {
      this.inputVal = event.target.value;
    }

    handleSubmit(event){
      event.preventDefault();
      const inputCmp = this.template.querySelector("lightning-input");
      const value = inputCmp.value;
        // perform validation check
        if (!value.includes("Burlington")) {
            inputCmp.setCustomValidity("The account name must include 'Burlington'");
        } else {
            // if there was a custom error before, reset it
            inputCmp.setCustomValidity(""); 
            const fields = event.detail.fields;
            fields.Name = this.inputVal;
            this.template.querySelector('lightning-record-edit-form').submit(fields);
        }
        // shows the error right away without user interaction
        inputCmp.reportValidity(); 
      
   }

   
}

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

Note 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.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_edit_record