lightning-record-edit-form is throwing an error if user doesn't have the FLS to a field

Question

<lightning-record-edit-form
  object-api-name={objectApiName}
  record-id={reviewOutputId} >
     <lightning-input-field placeholder="Headline" field-name='Headline__c'> </lightning-input-field>
</lightning-record-edit-form>

This is a simplified code, now when I remove the FLS for the Headline__c field. It's throwing an error "LWC component's @wire target property or method threw an error during value provisioning. Original error: [Cannot read properties of undefined (reading 'label')]"

According to the documentation, lightning-record-edit-form implements Lightning Data Service and doesn't require additional Apex controllers to create or update record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.

Any suggestion would be helpful.

Answer 1

You do need to set it up in your js file.
see: https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation

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

export default class RecordEditFormExample extends LightningElement {
    // Expose a field to make it available in the template
    nameField = NAME_FIELD;

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

here is the HTML:

<lightning-record-edit-form
    object-api-name="{objectApiName}"
    record-id="{recordId}"
>
    <lightning-input-field field-name="{nameField}"> </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>