1

I have an LWC component in which I'm using lightning-record-edit-form. I have a custom submit button. That is outside lightning record edit form. I don't have the 'Name' field in the HTML; instead, I want to update its value before submitting the form, but I'm always getting an undefined value. JS:

handleSubmit(event) {
        console.log('>>> Inside Handle submit... '+this.selectedValue);
        event.preventDefault();

        const recordEditForm = this.template.querySelector('lightning-record-edit-form');
        console.log('>>> recordEditForm... '+JSON.stringify(recordEditForm));

        if (recordEditForm) {
            console.log('>>> Inside if... ');
            const fields = recordEditForm.fields; // Get the current fields
            console.log('>>> fields... '+fields);
            // Modify the field value (assuming 'FieldName' is the API name of the field)
            fields.Name.value = 'Test Name';

            // Trigger form submission with the updated fields
            recordEditForm.submit(fields);
        }
}

My recordEditForm.fields is always undefined. I'm not sure how to modify value of field if that is not added in layout before submit.

1 Answer 1

1

When overriding the onsubmit behavior, access to the fields object is available through event.details.fields. From there, you can add Name to the object and set whatever value you choose. This allows you to keep the standard commit button but intercept the submit action.

import { LightningElement, api } from "lwc";
import DESCRIPTION_FIELD from "@salesforce/schema/Account.Description";
import WEBSITE_FIELD from "@salesforce/schema/Account.Website";

export default class AcctEdit extends LightningElement {
  // Expose a field to make it available in the template
  descriptionField = DESCRIPTION_FIELD;
  websiteField = WEBSITE_FIELD;

  // Flexipage provides recordId and objectApiName
  @api recordId;
  @api objectApiName;

  otherSaveHandler(event) {
    console.log("other save handler clicked");
    this.refs.hiddenButton.click();
  }

  handleSubmit(event) {
    event.preventDefault();
    const formFields = event.detail.fields;

    if (formFields) {
      console.log(">>> Inside if... ");
      console.log(formFields);
      formFields.Name = "Test Name";

      // Trigger form submission with the updated fields
      this.template
        .querySelector("lightning-record-edit-form")
        .submit(formFields);
    }
  }
}
<template>
  <lightning-record-edit-form
    object-api-name={objectApiName}
    record-id={recordId}
    onsubmit={handleSubmit}
  >
    <lightning-input-field field-name={descriptionField}>
    </lightning-input-field>
    <lightning-input-field field-name={websiteField}></lightning-input-field>
    <lightning-button lwc:ref="hiddenButton" variant="brand" type="submit" label="hidden save" hidden></lightning-button>
  </lightning-record-edit-form>
  <lightning-button variant="brand" onclick={otherSaveHandler} label="Save">
  </lightning-button>
</template>
2
  • My lightning button is outside lightning record edit form Feb 6 at 13:01
  • In that case, you'll need an additional onclick handler (see revisions above). The original submit button must stay in place but can be hidden via a HTML attribute. Feb 7 at 14:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .