lightning-record-edit-form: Prepopulate Fields

lightning-record-edit-form is a Standard controller replacement in Lightning Web Components. We can do all things which is possible using StandardController with lightning-record-edit-form. In LWC we also have JS controller that gives us extra functionality which we can add in our component.
But what are the benefits of using lightning-record-edit-form. Some of the main feature are:

• We can use this inside Modal to display only selected fields.
• If we want to allow child record creation from Parent record then we can use this to easily create the form.
• As this is totally customizable so we can decide which all fields we want to display and it also supports/display picklist values based on Record Type.
• We can also use this component to edit existing records as well.

As we can see that Name and Account Number is prepopulated. The example used in docs bind a variable, but here we are not using variables. Instead of them we are using renderedCallback() to get all fields and then updating the values.

We have multiple attribute available here. object-api-name is required and we need to always pass this. record-id we use when we want to update existing record. and record-type-id is optional and if want to display picklist field based on specific fields then only we need to use it. Now we will check the code:

lwc_RecordEditForm.html

<template>
    <lightning-card>
        <h3 slot="title">
            <lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
            Record Edit Form
        </h3>
        <div slot="footer">
                
        </div>
        <div>
            <lightning-record-edit-form object-api-name="Account" onsubmit={handleSubmit} onsuccess={handleSuccess}>
                <lightning-messages>
                </lightning-messages>
                <lightning-input-field field-name="Name">
                </lightning-input-field>
                <lightning-input-field field-name="AccountNumber">
                </lightning-input-field>
                <lightning-input-field field-name="Phone">
                </lightning-input-field>
                <lightning-input-field field-name="Active__c">
                </lightning-input-field>
                <lightning-input-field field-name="ParentId">
                </lightning-input-field>
                
                <lightning-button class="slds-m-top_small" type="submit" label="Save">
                </lightning-button>
            </lightning-record-edit-form>
        </div>
    </lightning-card>
</template>

lwc_RecordEditForm.js

import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Lwc_RecordEditForm extends NavigationMixin(LightningElement) {

    renderedCallback() {
        const inputFields = this.template.querySelectorAll(
            'lightning-input-field'
        );
        if (inputFields) {
            inputFields.forEach(field => {
                if(field.fieldName == 'Name')
                    field.value = 'Tushar Sharma';
                if(field.fieldName == 'AccountNumber')
                    field.value = '987987';
            });
        }
    }

    handleSubmit(event){
        event.preventDefault();       // stop the form from submitting
        //Check your custom validation
       /* const inputFields = this.template.querySelectorAll(
            'lightning-input-field'
        );
        if (inputFields) {
            inputFields.forEach(field => {
                if(field.fieldName == 'Name') {
                    //custom Error
                }
            });
        }
        */
        const fields = event.detail.fields;
        this.template.querySelector('lightning-record-edit-form').submit(fields);
     }

     handleSuccess(event){
        //const updatedRecordId = event.detail.id;
        // Generate a URL to a User record page
        console.log('==============record id', event.detail.id);
        
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: event.detail.id,
                actionName: 'view',
            },
        });
     }
}

So in controller we have complete control, If we want to add our custom validations then we can also add them, but Salesforce docs mentions, wen should use Custom validations instead of JS validations. lightning-messages will display all error message in nice format to users. We also used two event onsubmit and onsuccess. in onsubmit we are creating the record. We don’t need to use Apex here as Lightning data service support this OOTB. Once it is submitted successfully on onsuccess event we will get the recordid. I have used this record Id to navigate to record details page, in this method we can also show success message to users.

If you don't need any customization and want to create easy form, check lightning-record-form.

Did you like the post or do you have any questions, let me know in comments. Happy Programming 🙂

Like my Facebook page for more update :)