Let us discuss here how to use the lightning-record-edit-form . A lightning-record-edit-form component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record. The lightning-input-field component is used inside the lightning-record-edit-form to create editable fields. The lightning-output-field component and other display components such as lightning-formatted-name can be used to display read-only information in your form.lightning-record-edit-form requires a record ID to display the fields on the record. It doesn’t require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.
lightning-record-edit-form and lightning-input-field support the following features.
- Display a record edit layout for editing a specified record
- Display a record create the layout for creating a new record
Editing a Record
To enable record editing, pass in the ID of the record and the corresponding object API name to be edited. Specify the fields you want to include in the record edit layout using lightning-input-field. Create a Lightning Web component using the below SFDX command
sfdx force:lightning:component:create --type lwc --componentname recordeditform --outputdir force-app\main\default\lwc
Use the below recordeditform.html code
<template>
<lightning-record-edit-form record-id={recordId} object-api-name="Contact"
onsuccess={handleSuccess} onsubmit ={handleSubmit} >
<lightning-messages>
</lightning-messages>
<lightning-output-field field-name="AccountId">
</lightning-output-field>
<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-button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update">
</lightning-button>
</lightning-record-edit-form>
</template>
Use the below recordeditform.js code
import {
LightningElement,
api
} from 'lwc';
export default class Recordeditform extends LightningElement {
@api recordId;
handleSubmit(event) {
console.log('onsubmit: '+ event.detail.fields);
}
handleSuccess(event) {
const updatedRecord = event.detail.id;
console.log('onsuccess: ', updatedRecord);
}
}
Use the recordeditform.js-meta.xml code
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
Push the changes and you can able to see the below screen and you can able to edit the contact record
Creating a Record
To enable record creation, pass in the object API name for the record to be created. Specify the fields you want to include in the record create layout using lightning-input-field components. A record Id is generated when a record is created successfully. To return the Id, use the onsuccess handler.
Use the below recordeditform code.
<template>
<lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
<lightning-messages></lightning-messages>
<div class="slds-m-around_medium">
<lightning-input-field field-name='Id' value={contactId}></lightning-input-field>
<lightning-input-field field-name='LastName'></lightning-input-field>
<lightning-input-field field-name='FirstName'></lightning-input-field>
<lightning-input-field field-name='Email'></lightning-input-field>
<lightning-input-field field-name='AccountId'></lightning-input-field>
<div class="slds-m-top_medium">
<lightning-button variant="brand" type="submit" name="save" label="Create Contact">
</lightning-button>
</div>
</div>
</lightning-record-edit-form>
</template>
import {
LightningElement,
api,track
} from 'lwc';
export default class Recordeditform extends LightningElement {
@track contactId;
handleSuccess(event) {
this.contactId = event.detail.id;
}
}
Push the changes and you can able to see the below details as shown below.
Overriding Default Behaviors
To customize the behavior of your form when it loads or when data is submitted, use the onload and onsubmit attributes to specify event handlers. If you capture the submit event and submit the form programmatically, use event.preventDefault() to cancel the default behavior of the event. This prevents a duplicate form submission. Here in the example, we will be setting the fields values on the onsubmit behaviors.
Update the code as shown below which will set some of the account field values automatically.
import {
LightningElement,
api,
track
} from 'lwc';
export default class Recordeditform extends LightningElement {
handleSubmit(event) {
event.preventDefault(); // stop the form from submitting
const fields = event.detail.fields;
console.log(JSON.stringify(fields));
fields.title = 'VP of Opearations';
fields.MobilePhone = '2123123123213';
fields.LeadSource = 'Web';
this.template.querySelector('lightning-record-edit-form').submit(fields);
}
handleSuccess(event) {
const payload = event.detail;
console.log(JSON.stringify(payload));
const updatedRecord = event.detail.id;
console.log('onsuccess: ', updatedRecord);
}
}
Use the below HTML code.
<template>
<lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess} onsubmit={handleSubmit}>
<lightning-messages></lightning-messages>
<div class="slds-m-around_medium">
<lightning-input-field field-name='Id' value={contactId}></lightning-input-field>
<lightning-input-field field-name='LastName'></lightning-input-field>
<lightning-input-field field-name='FirstName'></lightning-input-field>
<lightning-input-field field-name='Email'></lightning-input-field>
<lightning-input-field field-name='AccountId'></lightning-input-field>
<div class="slds-m-top_medium">
<lightning-button variant="brand" type="submit" name="save" label="Create Contact">
</lightning-button>
</div>
</div>
</lightning-record-edit-form>
</template>
Using Record Types
If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the record-type-id attribute if you have multiple record types on an object and you don’t have a default record type. Otherwise, the default record type ID is used like below.
<lightning-record-edit-form object-api-name="Contact" record-type-id="003XXXXXXXXXXXXXXX" onsuccess={handleSuccess}>
</lightning-record-edit-form>
Error Handling
You must include lightning-messages to support error handling and displaying of error messages. If the record edit layout includes a lightning-button component with type="submit", when the button is clicked the lightning-record-edit-form component automatically performs error handling and saves any changes in the input fields. Similarly, if the record create layout provides a submit button, when the button is clicked error handling is automatically performed and a new record is created with the input data you provide. Additionally, the lightning-record-edit-form component provides basic input validation like below.
<template>
<lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
<lightning-messages></lightning-messages>
<div class="slds-m-around_medium">
</div>
</lightning-record-edit-form>
</template>
You can able to see the errors as shown below .
Beyond Cloud 