You need to sign in to do that
Don't have an account?
Akash Choudhary 17
LWC Input Form
Hello All,
I have a input form for a custom object Employee with three fields name, designation, phone .
on click of save button only name is getting saved, rest phone and designation fields are empty.
Here is my code-
HTMl
JS
Meta Xml
Apex
I have a input form for a custom object Employee with three fields name, designation, phone .
on click of save button only name is getting saved, rest phone and designation fields are empty.
Here is my code-
HTMl
<template> <lightning-card title= "Insert Employee Data" icon-name="standard:account"> <div class="slds-p-around_x-small"> <lightning-input label="Employee Name" value={rec.Name} onchange={handleNameChange}></lightning-input> <lightning-input label="Designation" value={rec.Designation__c} onchange={handleDesChange}></lightning-input> <lightning-input label="Phone" value={rec.Primary_Phone__c} onchange={handlePhnChange}></lightning-input><br/> <lightning-button label="Save" onclick={handleClick}></lightning-button> </div> </lightning-card> </template>
JS
import { LightningElement, track } from 'lwc'; import NAME_FIELD from '@salesforce/schema/Employee__c.Name'; import DESIGNATION_FIELD from '@salesforce/schema/Employee__c.Designation__c'; import PHONE_FIELD from '@salesforce/schema/Employee__c.Primary_Phone__c'; import createEmployee from '@salesforce/apex/createEmployee.createEmployee'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class InputFormForCustomObject extends LightningElement { @track name = NAME_FIELD; @track designation = DESIGNATION_FIELD; @track phone = PHONE_FIELD; rec = { Name : this.name, Designation : this.Designation__c, Phone : this.Primary_Phone__c } handleNameChange(event) { this.rec.Name = event.target.value; console.log("name1", this.rec.Name); } handleDesChange(event) { this.rec.Designation = event.target.value; console.log("Designation", this.rec.Designation); } handlePhnChange(event) { this.rec.Phone = event.target.value; console.log("Phone", this.rec.Phone); } handleClick() { createEmployee({ hs : this.rec }) .then(result => { this.message = result; this.error = undefined; if(this.message !== undefined) { this.rec.Name = ''; this.rec.Designation = ''; this.rec.Phone = ''; this.dispatchEvent( new ShowToastEvent({ title: 'Success', message: 'Employee created', variant: 'success', }), ); } console.log(JSON.stringify(result)); console.log("result", this.message); }) .catch(error => { this.message = undefined; this.error = error; this.dispatchEvent( new ShowToastEvent({ title: 'Error creating record', message: error.body.message, variant: 'error', }), ); console.log("error", JSON.stringify(this.error)); }); } }
Meta Xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Apex
public with sharing class createEmployee { @AuraEnabled public static Employee__c createEmployee(Employee__c hs) { insert hs; return hs; } }
Akash you are assigning input values in an incorrect way, see this correct code and solve your problem.
Incorrect: Correct:
If you found it useful please appreciate my efforts and mark it as the best answer.
LinkedIn: https://www.linkedin.com/in/soyab-hussain-b380b1194/
Regards,
Soyab