[SalesForce] How to make rich text input work with lightning-record-edit form in lwc

While the works fine with standard input field component (lighting-input-field) it seems not to support the lightning-input-rich-text component.
With the following template the rendered form does contain both fields the databinding for the rich text input is off:

  1. Only the value for the standard input is set correctly based on the database content and
  2. only the changes in the standard input are saved back to the database

Any idea how to make the rich input field working without @wire and apex?


here's the template's code snippet:

    <lightning-record-edit-form 
            object-api-name={objectApiName} 
            record-id={recordId}>
            <lightning-input-field field-name={nameField}></lightning-input-field>
            <lightning-input-rich-text 
                field-name={notesField} 
                custom-buttons={myCustomButtons}>
            </lightning-input-rich-text>
            <div class="slds-m-top_medium">
                <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
            </div>
    </lightning-record-edit-form>

this is the js file:

import { LightningElement, api } from 'lwc';
import NAME_FIELD from '@salesforce/schema/TSI_Visit_Report__c.Name';
import NOTES__C_FIELD from '@salesforce/schema/TSI_Visit_Report__c.Notes__c';

export default class VisitReport extends LightningElement {
    // Flexipage provides recordId and objectApiName
    @api recordId;
    @api objectApiName;
    nameField = NAME_FIELD;
    notesField = NOTES__C_FIELD;
}

Heres the final rendering:

rendered lwc component with empty richt text input

LWC documentation does not indicate limits on the use of the two components together but all examples/recipes only contain simple input fields…

Any help appreciated

Best Answer

The documentation for lightning-input-field says it supports rich text field types.

I think you have to use lightning-input-field instead of lightning-input-rich-text.

Related Topic