Lightning-Record-Form does not save a record?

Question

I cannot for the life of me understand the issue i am facing.

1. Basically i am trying to search for a case record and update it using lightining-record-form in edit mode in LWC. All works fine and the onsuccess event is called as well. But the case record is just not updating??

Below is the code I'm using

<template>
    <lightning-card title='Case Search and Update'>
        <div class="slds-p-around_medium lgc-bg">
            <lightning-input type="text" label="Case #" placeholder='Search for a Case..' onchange={handleCaseNumChange}></lightning-input> 
        </div>

        <div class="slds-p-left_medium">
            <lightning-button variant="brand" label="Get Case" onclick={handleButtonClick} ></lightning-button>
        </div>

        <div class="slds-p-left_medium">
        <template if:true={showForm}>

           <lightning-record-form
            record-id={recordId}
            object-api-name={objectApiName}
            fields={fields}
            columns="2"
            mode="edit"
            layout-type="Full"
            onsubmit={handleSubmit} oncancel={handleCancel} onsuccess={handleSuccess}>
            </lightning-record-form> 
            </template>
        </div>
    </lightning-card>


</template>

JS :

import { LightningElement,track,wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import findId from '@salesforce/apex/fetchCaseNumber.fetchId'
import REASON_FIELD from '@salesforce/schema/Case.Reason';
import ContactEmail_FIELD from '@salesforce/schema/Case.ContactEmail';
import AccountId_FIELD from '@salesforce/schema/Case.AccountId';
import Type_FIELD from '@salesforce/schema/Case.Type';
import Description_FIELD from '@salesforce/schema/Case.Description';
import Subject_FIELD from '@salesforce/schema/Case.Subject';
import Comments_FIELD from '@salesforce/schema/Case.Comments';
import ParentId_FIELD from '@salesforce/schema/Case.ParentId';
import Product_FIELD from '@salesforce/schema/Case.Product__c';
import IsEscalated_FIELD from '@salesforce/schema/Case.IsEscalated';
import OwnerId_FIELD from '@salesforce/schema/Case.OwnerId';

export default class SearchAndUpdateCase extends LightningElement {
    @track caseNumber;
    @track csNum;
    showForm = false;
    recordId='';
    objectApiName = 'Case';

    @wire(findId,{caseNum : '$csNum'})
    csId ;

    @track fields = [REASON_FIELD,ContactEmail_FIELD,AccountId_FIELD,Description_FIELD,Type_FIELD,Subject_FIELD,
        Comments_FIELD,ParentId_FIELD,Product_FIELD,IsEscalated_FIELD,OwnerId_FIELD ];

    handleCaseNumChange(event){
        console.log('>>Inside handle case change');
        this.csNum = event.target.value;
        console.log('>>>The typed incident number is '+this.csNum);
        console.log('>>>Case Id is :'+JSON.stringify(this.csId)); 
    }

    handleButtonClick(event){
        //console.log(event.target);
        console.log('>>>Case Id is from button :'+JSON.stringify(this.csId));
        if(this.csId){
            this.showForm = true;
            this.recordId = this.csId.data;}
    }

    handleSubmit(event){
        event.preventDefault();       // stop the form from submitting
        console.log('>>Inside Submit<<');
        const fields = event.detail.fields;
        fields.Comments += 'My Custom Comment'; // modify a field
        this.template.querySelector('lightning-record-form').submit(this.fields);

     } 

     handleSuccess(event){
        console.log('>>>Inside success<<<');
        const evt = new ShowToastEvent({
            title: "Case Updated",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(evt);
        this.showForm = false;

     }

     handleCancel(event){

        console.log('>>Inside Cancel<<');
        this.showForm = false;
     }
}

Answer 1

the root of your issue is that you are not submitting your modified fields on your form. instead you are submitting the fields you stored from your import. See Below:

What you SHOULD be submitting

What you ARE submitting

to correct this is simple.

Your code

handleSubmit(event){
    event.preventDefault();       // stop the form from submitting
    console.log('>>Inside Submit<<');
    const fields = event.detail.fields;
    fields.Comments += 'My Custom Comment'; // modify a field
    this.template.querySelector('lightning-record-form').submit(this.fields);

 }

Updated:

handleSubmit(event){
    event.preventDefault();       // stop the form from submitting
    console.log('>>Inside Submit<<');
    const fields = event.detail.fields;

// **** I also changed this line because if the field is null it print in the value with your += "nullMy custom Comment"
    fields.Comments = fields.Comments !== null && fields.Comments !== 'null' ? fields.Comments + 'My Custom Comment' : "My Custom Comment"; 

// **** Change this line here to submit the correct form fields *******
    this.template.querySelector('lightning-record-form').submit(fields);

  }

notice that you are not submitting this.fields in the end. you are submitting the fields that you were given from the form, but with any modifications that you have made to those fields.