lightning-record-edit-form in LWC

 lightning-record-edit-form is used to display one or more fields related to the record by accepting record Id. We use lightning:inputField inside the lightning:recordEditForm to create editable fields. We can use lightning:outputField as well to display read-only information.

 lightning-record-edit-form Form supports the below features:

Display a record edit layout for editing a specified record.

Display a record create layout for creating a new record.

Editing a Record:

lightningRecordEditFormExample.html

<template>

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

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

        <lightning-input-field field-name="Description"></lightning-input-field>

        <lightning-input-field field-name="Industry"></lightning-input-field>

        <lightning-input-field field-name="Site"></lightning-input-field>

        <lightning-button

            class="slds-m-top_small"

            variant="brand"

            type="submit"

            name="update"

            label="Update">

        </lightning-button>

</lightning-record-edit-form>

</template>

lightningRecordEditFormExample.js

import { LightningElement,api } from 'lwc';

 

export default class LwcRecordEditFormExample extends LightningElement {

@api recordId;

 

}

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

Creating a Record:

lightningRecordEditFormExample.html

<template>

    <lightning-record-edit-form object-api-name="Account">

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

        </lightning-input-field>

            <lightning-button

                class="slds-m-top_small"

                type="submit"

                label="Create new Account">

            </lightning-button>

    </lightning-record-edit-form>

</template>

lightningRecordEditFormExample.js

import { LightningElement,api } from 'lwc';

export default class LwcRecordEditFormExample extends LightningElement {

}

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