+ Start a Discussion
Akash Choudhary 17Akash 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
<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;
    }
}

​​​​​​​​​​​​​​
Best Answer chosen by Akash Choudhary 17
Soyab HussainSoyab Hussain
Hi Akash,

Akash you are assigning input values in an incorrect way, see this correct code and solve your problem.

Incorrect:
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);
}
Correct:
handleNameChange(event) {
    this.rec.Name = event.target.value;
    console.log("name1", this.rec.Name);
}  
handleDesChange(event) {
    this.rec.Designation__c = event.target.value;
    console.log("Designation", this.rec.Designation__c);
}
handlePhnChange(event) {
    this.rec.Primary_Phone__c = event.target.value;
    console.log("Phone", this.rec.Primary_Phone__c);
}

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