LWC Components     

lightning-record-form component allows you to quickly create forms to add, view, or update a record.

lightning-record-form implements Lightning Data Service and doesn’t require additional Apex controllers to create or edit record data. It also takes care of field-level security and sharing for you, so users see only the data that they have access to.

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

Modes

  The component accepts a mode value that determines the user interaction allowed for the form. The value for mode can be one of the following:

1. edit – Creates an editable form to add a record or update an existing one. When updating an existing record, specify the record-id. Edit mode is the default when record-id is not provided, and displays a form to create new records.
2. view – Creates a form to display a record that the user can also edit. The record fields each have an edit button. View mode is the default when record-id is provided.
3. readonly – Creates a form to display a record without enabling edits. The form doesn’t display any buttons.

<template>

    <lightning-card title="Record Form ReadOnly" icon-name="standard:account">

        <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} columns="2" mode="readonly" onsubmit={handleSubmit}></lightning-record-form>

    </lightning-card>

    <!-- Record Edit-->

    <lightning-card title="Record Form Edit" icon-name="standard:account">

        <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} columns="2" mode="Edit" onsubmit={handleSubmit}></lightning-record-form>

    </lightning-card>

    <!-- Record View-->

    <lightning-card title="Record Form View" icon-name="standard:account">

        <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields} columns="2" mode="View" onsubmit={handleSubmit}></lightning-record-form>

    </lightning-card>

    <!-- Edit form -->

    <lightning-card title="Edit Form" icon-name="standard:account">

        <lightning-record-edit-form object-api-name={objectApiName}>

            <lightning-input-field field-name="Name" required></lightning-input-field>

            <lightning-input-field field-name="AnnualRevenue" required></lightning-input-field>

            <lightning-button type="submit" name="submit" label="Create Account" ></lightning-button>

        </lightning-record-edit-form>

    </lightning-card>

    <!-- View Form-->

    <lightning-card title="View Form" icon-name="standard:account">

        <lightning-record-view-form record-id={recordId} object-api-name={objectApiName}>

            <lightning-output-field field-name="Name"></lightning-output-field>

            <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>

        </lightning-record-view-form>

    </lightning-card>

</template>

JS

import { LightningElement,api } from 'lwc';

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

import Revenue_Field from '@salesforce/schema/Account.AnnualRevenue';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class RecordForm extends LightningElement {

    fields=[Name_Field,Revenue_Field];

    @api recordId;

    @api objectApiName;

    handleSubmit(event){

        

    }

    validateFields() {

        this.template.querySelectorAll('lightning-input-field').forEach(element => {

            element.reportValidity();

        });

    }

}

XML

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

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

    <apiVersion>48.0</apiVersion>

    <isExposed>true</isExposed>

    <targets> 

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Note : - This component doesn’t support all Salesforce standard objects. For example, the Event and Task objects are not supported. External objects and person accounts are not supported.