0

I am saving selected checkbox group values in a text field as a comma separated values, but when page reloaded the check box group not displaying with selected values.

JS:

import { LightningElement,api,track } from 'lwc'; 
import TITLE_FIELD from '@salesforce/schema/Contact.Title'; 
export default class RecordEditFormLWC extends LightningElement {
        selectedValues = TITLE_FIELD;
 @track isChanged =false; 
 @track value ; 
 @track titleold;
        handleOnLoad(event) {
        var record = event.detail.records;
        var fields = record[this.recordId].fields;

   /*   const titleNew=fields.Title.value;
        this.titleold=titleNew;  */
         
        if(fields.Title.value==="option1"){
        this.value.checked="checked";           
        this.isChanged=true;
 } 

    @api recordId;
    @api objectApiName;
    value = [];
    get options() {
        return [
            { label: 'Ross', value: 'option1' },
            { label: 'Rachel', value: 'option2' },
        ];
    }
    get selectedValue() {
        return this.value.join(',');
    }
    handleChange(e) {
        this.value = e.detail.value;
    } 
}

HTML:

<template> 
<lightning-record-edit-form
    object-api-name="Contact" record-id={recordId}>
          <lightning-checkbox-group name="Checkbox Group"
                                  label="Checkbox Group"
                                  options={options}
                                  value={value}
                                  onchange={handleChange}
                                  onload={handleOnLoad}>
                                  </lightning-checkbox-group>

 <lightning-input-field class="slds-hide" field-name={selectedValues} value = {selectedValue} ></lightning-input-field>
        <div class="slds-var-m-top_medium">
            <lightning-button variant="brand" type="submit" label="Save">
            </lightning-button>
        </div> 
</lightning-record-edit-form> 
</template>

1 Answer 1

0

You need to add onsubmit event in lightning-record-edit form like mentioned below.

<lightning-record-edit-form object-api-name="Contact" onsubmit={handleSubmit} record-id={recordId}>

handle the onsubmit event handler in js.

handleSubmit(event){
    event.preventDefault();       // stop the form from submitting
    const fields = event.detail.fields;
    this.template.querySelector('lightning-record-edit-form').submit(fields);
 }

You must log in to answer this question.

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