How to edit a record using lightning-record-form in LWC?

 We use the lightning-record-form to create forms to add, view, or update a record.

It is easier to build forms using lightning-record-form as compared to lightning-record-view-form and lightning-record-edit-form however lightning-record-form is less customizable. To customize the form layout or to provide custom rendering of data use lightning-record-view-form(view a record) and lightning-record-edit-form(add or update).  lightning-record-form implements Lightning Data Service and hence it doesn't require additional Apex controllers to create or edit record and it also takes care of field-level security and sharing, so users see only the data that they have access to. 

Sample syntax:

<lightning-record-form

    record-id="IdOfParticularRecord"

    object-api-name="Account"

    layout-type="Compact"

    columns="1"

    mode="readonly">

</lightning-record-form>

Important points to note:

• The object-api-name attribute is always required, and the record-id is required only when you’re editing or viewing a record.

• We use fields attribute to pass record field as an array of string. The fields are displayed in the order we list them.

• We use layoutType attribute to specify a Full or Compact layout. If we use this then the field available on the layout are displayed in the form.

• To specify the field order, we use fields without the layout-type attribute. It is not recommended to use the fields attribute with the layout-type attribute as the display order of the fields can vary.

•  layout-type="Full"- The full layout corresponds to the fields on the record detail page.              
•  layout-type="Compact" - The compact layout corresponds to the fields on the highlights panel at the top of the record. 

• Not all standard object are supported.

           For ex: Event and task are not supported. External objects are also not supported.

•       Modes:

         The value for mode can be one of the following mentioned below and it determines the user             interaction allowed for the form.

        1) edit - Creates an editable form to add a record or update an existing one.

        2) view - Creates a form to display a record that the user can also edit.

        3) readonly - Creates a form to display a record. In this case the form doesn't display any                      buttons.

If you do not specify the mode attribute, its default value is edit but if you specify the record-id

the default value of mode is view.

Let us create a lightning web component using lightning-record-form to edit a record which we will place on Account detail page.

recordDetailCheckComp.html

<template>

    <lightning-card>

    <lightning-record-form record-id={recordId} object-api-name="Account"

        fields={fields} columns="2" mode="edit" onsubmit={handleSubmit}>

    </lightning-record-form>

    </lightning-card>

</template>

recordDetailCheckComp.js

import { LightningElement, api } from 'lwc';

import Account_Name from '@salesforce/schema/Account.Name';

import Account_Description from '@salesforce/schema/Account.Description';

import Account_Industry from '@salesforce/schema/Account.Industry';

import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class LightningRecordFormEditExampleLWC extends LightningElement {

    @api recordId;

    fields = [Account_Name, Account_Description, Account_Industry];

    handleSubmit(event){

        const evt = new ShowToastEvent({

            title: 'Success Message',

            message: 'Record Updated successfully ',

            variant: 'success',

            mode:'dismissible'

        });

        this.dispatchEvent(evt);

    }

}

recordDetailCheckComp.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>50.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

    </targets>

</LightningComponentBundle>

OUTPUT: