How can I be able to set a new checkbox field value to html or js in LWC upon update? I implemented a lightning-record-edit-form
that acts as a custom edit page for a custom object.
I tried the following but the checkbox does not update upon submit:
1st Attempt: via html using checked attribute
<lightning-input-field field-name="isDeleted__c" class="slds-hide" checked></lightning-input-field>
2nd Attempt: via html using value attribute
<lightning-input-field field-name="isDeleted__c" class="slds-hide" value=true></lightning-input-field>
3rd Attempt: via js controller
js file
handleSuccess( event ) {
this.dispatchEvent(
new ShowToastEvent({
title: 'success',
message: 'Success!',
variant: 'success',
}),
);
}
handleSubmit() {
this.template.querySelector('lightning-record-edit-form').submit();
this.template.querySelector('lightning-input-field.slds-hide').checked = true;
}
html file
<lightning-record-edit-form object-api-name="CustomObject__c" record-id={recordId} onsuccess={handleSuccess}>
<lightning-input-field field-name="isDeleted__c" class="slds-hide"></lightning-input-field>
<lightning-record-edit-form>
<lightning-button label="Update" onclick={handleSubmit} type="submit"></lightning-button>
Best Answer
I'm not 100% what you're asking, so here are my two answers to each question I think you might be asking:
If you're asking on how to update a field with
lightning-record-edit-form
:Check out this documentation for examples on using
lightning-record-edit-form
.Your code will look like this:
html
Clicking the
lightning-button
will automatically update the record.If you're asking on how to change the value of the checkbox after the record has been updated:
There are a few key things to keep in mind here on getting this to work:
First is what the
lightning-input-field
expects you to provide. If you look at the specification, you'll see that it expects an attributevalue
which contains the field's value. In one of your examples, you tried using the attributechecked
. Thelightning-input-field
won't know what to do with achecked
attribute, as this is not an attribute listed in the specification. So use the attributevalue
for editing/updating whether or not the checkbox is checked.Second problem: what type of data is
value
expecting? Unfortunately, salesforce doesn't have a clear cut example of how it represents a checkbox in javascript/html. I fetched some dummy data that contained a checkbox field, and after console.log()-ing the object, I could see that thevalue
for a checkbox expects a plain oldtrue
orfalse
boolean.Lastly, I suggest you avoid using
this.template.querySelector()
to access/modify the checkbox's value. Since thelightning-input-field
is a sub-component withvalue
as a public property, it is better practice and more consistent with the LWC framework to assign a js variable in the HTML, e.g.And in your .js controller, you'll have
Furthermore, in your
handleSuccess()
, you'll have to manually update the record (probably with updateRecord()) if you want the checkbox value to be changed after the record has been successfully edited.Note: In both of my solutions I removed the
slds-hide
class from all your tags, as that just makes the HTML invisible and wasn't relevant to the solutions.