lightning-record-form Lightning Web Component (LWC)

lightning-record-form is a Lightning Web Component (LWC) alternative of apex:detail tag. Lightning-record-form allow us to create forms to add, view, or update a record. This component provide us these features:

• Switches between View and Edit mode when use start editing form in view mode
• Provide standard Save, Cancel options without any custom code
• Use the default layout with options to display only selected fields.

It supports three type of mode:

• edit: create an editable form while creating a new record or updating an existing one. If we don’t provide and record-id then this mode is displayed as default.
• view: display data in view mode with an option to edit form. This is the default layout if we provide record-id.
• readonly: as the name suggest, show the form in read only mode without giving option to edit them.

As it supports two types of layout: Full and Compact. or We can pass fields in fields attribute to display only selected fields. We can also pass record-id, object-api-name as parameter so we can easily create reuseable form for any supported object.
Now we will check the code. In which we will cover how we can update field value in JS controller and can do custom check if needed. Once record created/updated successfully we will display totast notification.

lwc_recordForm.html

<template>
    <lightning-card>
        <h1 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Record Form
        </h1>
        <div slot="footer">
                
        </div>
        <div>
        <!-- fields={fields} -->
        <lightning-record-form
                record-id={recordId}
                object-api-name={objectApiName}
                layout-type="Full"
                columns="2"
                mode={modeName}
                onsubmit={handleSubmit}
                onsuccess={handleSuccess}>
        </lightning-record-form>
    </div>
    </lightning-card>
</template>

lwc_recordForm.js

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

export default class Lwc_recordForm extends LightningElement {
    //fields = ['Name', 'AnnualRevenue', 'Industry'];
    modeName ='view';
    objectApiName = 'Account';
    recordId = '001B000001AR4dE';

    handleSubmit(event){
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        fields.Name = 'Tushar Sharma'; // modify a field
        console.log('fields', fields);
        console.log('fields 2', fields.Name);
        this.template.querySelector('lightning-record-form').submit(fields);
     }

     handleSuccess(event) {
        console.log('fields');
        const evt = new ShowToastEvent({
            title: "Account updated",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(evt);
    }
}

This is how our output will look like, Notice we changed the name field data but in controller we overwrite those value with our predefined values. So we can update values before saving the actual data.

So we have created lightning-record-form in LWC using few lines of code. As we have passed object-api-name and record-id as attribute so we can easily get these details from parent component or lightning page and can use this form with any supported object.

lightning-record-form does not allow us to prepopulate field, check how you can do that using lightning-record-edit-form.

So do you have any questions here or want to share your feedback, let me know in comments. Happy Programming 🙂

Like my Facebook page for more update :)