Lightning-Record-Edit-form - Update values using button

Question

I have a Lightning-Record-Edit-Form. I want to add a button that, when clicked, updates a few fields in the form and rerenders the page.

I'm just unsure how I access these fields from javascript so I can update them.

The business reason is that after the stage is a certain value, the users can no longer edit the record (I hide the save button) But there are times when the user will need to unlock the record. I want the user to click a button which will update the stage along with some other fields to track that its been "re-opened"

Thank you!

Answer 1

Assume that you are working on Account object & its Notes__c field using lightning-record-edit-form. In the component JS file, you would import the field using the following code:

import NOTES_FIELD from '@salesforce/schema/Account.Notes__c';

and declare a field using the following code:

notes = NOTES_FIELD;

In the component HTML file, the input field would be declared, along with a button, as given in the code snippet below:

<lightning-input-field field-name={notes}></lightning-input-field>
<lightning-button class="slds-m-top_small" label="Unlock" onclick={handleUnlock}></lightning-button>

In the handleUnlock JS Method, you can reset the required fields as shown below:

handleUnlock(event) {
    // Write code to unhide the 'Save' button here.

    const inputFields = this.template.querySelectorAll('lightning-input-field');
    if (inputFields) {
        inputFields.forEach(field => {
            if(field.fieldName === this.notes.fieldApiName) {
                field.reset();
            }
            // Write additional IF conditions or any other conditional logic to reset the field.
        });
    }
}

If you need to set a specific value to the field, then you should do the following. In the component JS file, declare a field to hold the input field value as notesValue; and in the component HTML file, declare the input field HTML as follows:

<lightning-input-field field-name={notes} value={notesValue}></lightning-input-field>

In the handleUnlock JS Method, you can update the required field values as shown below:

handleUnlock(event) {
    // Write code to unhide the 'Save' button here.

    this.notesValue = '<Place required value here>';
}