Usage of Lightning Record Edit Form in Lightning Web Components

Usage of Lightning Record Edit Form in Lightning Web Components

In my previous post, I have told you about how to navigate in the Lightning Web Components, now I’m going to tell you how to use lightning-record-edit-form in Lightning Web Component.

Lightning Record Forms uses LDS or Lightning Data Service, please have a look at the snippet.


    <lightning-card title="Lightning Record Edit Form"  icon-name="custom:custom14">
        <div class="slds-m-around_medium">
                Select Account 
            <select id='myselect' class="slds-select" onchange={handleAccountSelect} >
                <option value='null' >--Select Account--</option>
                <template for:each={accountData} for:item="acc"> 
                    <option key={acc.Id} value={acc.Id} >{acc.Name}</option>
        <lightning-record-edit-form title='Record Edit'
                                record-id={recordId} object-api-name={accountObject} 
                                onsubmit = {handleSubmit} >
            <div class="slds-grid slds-wrap slds-m-around_medium">
                <template if:false={reloadForm}>
                    <div class="slds-col slds-size_2-of-2">
                        <lightning-input-field field-name={nameField}></lightning-input-field>
                    <div class="slds-col slds-size_2-of-2">
                        <lightning-input-field field-name={phoneField}></lightning-input-field>
                <template if:true={reloadForm}>
                    Please Wait!
            <lightning-button class="slds-m-around_medium" type="submit" variant="brand" label={btnLabel}></lightning-button>


import { LightningElement, track, wire } from 'lwc';
import { refreshApex } from '@salesforce/apex';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
import ACCOUNT_PHONE_FIELD from '@salesforce/schema/Account.Phone';

import getAllAccounts from '@salesforce/apex/helloWorldClass.getAllAccounts';

import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class LightningRecordEditForm extends LightningElement {
    wiredAllAccountResult; // a new variable was introduced 
    @track accountData;
    @track error ;
    @track recordId;
    @track reloadForm;

    accountObject = ACCOUNT_OBJECT;
    nameField = ACCOUNT_NAME_FIELD;
    phoneField = ACCOUNT_PHONE_FIELD;
    imperativeWiring(result) {
        this.wiredAllAccountResult = result;
        if( {
            this.accountData =;
        }else if (result.error) {
            this.error = result.error ; 
        // Run code when account is created.
        let message = 'Account has been created successfully with the name \''+event.detail.fields.Name.value+'\'';
        if(this.recordId!==undefined && this.recordId!==null){
            message = 'Account has been updated successfully'
        const evt = new ShowToastEvent({
            title: 'Successfull',
            message: message,
            variant: 'success',
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;

    handleAccountSelect(event) {
            this.recordId = null;
    get btnLabel(){
        if(this.recordId!==undefined && this.recordId!=null){
            return 'Update Account';
        return 'Create Account';


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="LightningRecordEditForm">

MoreoverIf you have any suggestions or issue with the post, you can reply in the comment box.

Support: For any further Salesforce support/ customisations, Chat with us

Parul Singh

I’m a Salesforce Certified Service Cloud Consultant, Certified Administrator & Certified Platform Developer. I have 2 years of experience, currently working on Field Service Lightning, Lightning Flows and Learning Lightning Web Component. I was featured in the top Salesforce Bloggers of 2018 by

You may also like...