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;
    }
}

​​​​​​​​​​​​​​