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.
lightningRecordEditForm.html
<template>
<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>
</template>
</select>
</div>
<lightning-record-edit-form title='Record Edit'
record-id={recordId} object-api-name={accountObject}
onsuccess={handleAccountCreated}
onsubmit = {handleSubmit} >
<lightning-messages></lightning-messages>
<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>
<div class="slds-col slds-size_2-of-2">
<lightning-input-field field-name={phoneField}></lightning-input-field>
</div>
</template>
<template if:true={reloadForm}>
Please Wait!
</template>
</div>
<lightning-button class="slds-m-around_medium" type="submit" variant="brand" label={btnLabel}></lightning-button>
</lightning-record-edit-form>
</lightning-card>
</template>
lightningRecordEditForm.js
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;
@wire(getAllAccounts)
imperativeWiring(result) {
this.wiredAllAccountResult = result;
if(result.data) {
this.accountData = result.data;
}else if (result.error) {
this.error = result.error ;
}
}
handleAccountCreated(event){
this.reloadForm=true;
// 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',
});
this.dispatchEvent(evt);
refreshApex(this.wiredAllAccountResult);
this.recordId=null;
this.reloadForm=false;
}
handleSubmit(event){
event.preventDefault(); // stop the form from submitting
this.reloadForm=true;
const fields = event.detail.fields;
this.template.querySelector('lightning-record-edit-form').submit(fields);
}
handleAccountSelect(event) {
if(event.target.value!=='null'){
this.recordId =event.target.value;
}else{
this.recordId = null;
}
}
get btnLabel(){
if(this.recordId!==undefined && this.recordId!=null){
return 'Update Account';
}
return 'Create Account';
}
}
lightningRecordEditForm.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LightningRecordEditForm">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm
Moreover, If 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