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

lightninglightning-web-components

<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.

Best Answer

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>