Not able to save contact record using apex controller in lwc

Question

ERROR Message on Console after clicking the Create Contact button.

{message: "Insert failed. First exception on row 0; first err…field names on insert/update call: phone: [phone]"}

CreateContactUsingUI.js

import { LightningElement, track } from 'lwc';
import con_name from '@salesforce/schema/Contact.Name';
import con_phone from '@salesforce/schema/Contact.Phone';
import saveContact from '@salesforce/apex/CreateContactUsingUIController.saveContact';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';

export default class CreateContactUsingUI extends LightningElement {
@track error;

@track con ={
    name:con_name,
    phone:con_phone
};

handleChange(event){
    if(event.target.label==='Name'){
        this.con.name = event.target.value;
    }
    if(event.target.label==='Phone'){
        this.con.phone = event.target.value;
    }
}

handleSave() {
    console.log('this object is ==>'+this.con.phone + this.con.name);

    saveContact({con: this.con})
    .then(result => {
        this.con = {};
        console.log('result ===> '+result);
        this.dispatchEvent(new ShowToastEvent({
            title: 'Success!!',
            message: 'Contact Created Successfully!!',
            variant: 'success'
        }),
        );
    })
    .catch(error => {
        console.log('error=>'+  error.message);
        this.dispatchEvent(new ShowToastEvent({
            title: 'Failure!!',
            message: 'Contact is not created!!',
            variant: 'failure'
        }),
        );
    });
}
}

CreateContactUsingUI.html

<template>
        <lightning-card title="Create Contact Using UI and apex method">
 
        <lightning-input label="Name" onchange={handleChange} value={con.name} ></lightning-input>          
                <br>
                <lightning-input  label="Phone" onchange={handleChange} value={con.phone} ></lightning-input>                
                <br>
                <lightning-button onclick={handleSave} label="Create Contact"></lightning-button>
        </lightning-card>
</template>

CreateContactUsingUIController.cls

public with sharing class CreateContactUsingUIController {
    public CreateContactUsingUIController() {

    }

    @AuraEnabled
    public static Contact saveContact(Contact con){
        try {
            insert con;
            return con;
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }
}

Answer 1

@track con ={
    name:con_name,
    phone:con_phone
};

You're using the field tokens incorrectly. If you don't modify both fields, you'll get an error. Instead:

@track con ={
    name: '',
    phone: ''
};

In addition, sObjects are normally defined with a property that states the object:

@track con ={
    sobjectType: 'Contact',
    name: '',
    phone: ''
};