Salesforce LWC edit form not showing input fields

Question

I have poured through the articles and answers, tried updating the code base to some solutions based on those articles, checked FLS and Profile access to ensure proper access to the fields and I still cannot figure out why this is happening.

I am trying to create a LWC to show a number of User lookups associated to the Opportunity object so I can place that LWC on its own tab as we move to using Lightning Page Layouts. This is not tied to a quick action or button. The idea is to create a tab in the lightning page designer and add this component to that tab. There's around 20 or so fields so this is kind of a big situation.

HTML:

<template>
    <lightning-record-edit-form object-api-name={Opportunity} record-id={recordId}>
        <lightning-output-field field-name={FIELD_NAME__c}></lightning-output-field>
    </lightning-record-edit-form>  
</template>

JavaScript

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import COS from '@salesforce/schema/Opportunity.FIELD_NAME__c';

export default class OpportunityTeamDisplay extends LightningElement {
    FIELDS = [COS];
    @api recordId;    
    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    wiredData( { error, data } ) {
        if ( data ) {
            // do something
        }
        if ( error ) {
            // do something
        }
    }
}

I have followed documentation, notes, other question and answer threads, and even my architect is stumped. Am I missing something here?

Answer 1

You have used curly braces (which are a bind expression) rather than a regular string in your component markup.

I can see two attributes that will need to be changed to fix this:

field-name={FIELD_NAME__c} and object-api-name={Opportunity}

These should become:

field-name="FIELD_NAME__c" and object-api-name="Opportunity"

If you were to try to use binding syntax you could do something like this:

Define a javascript var in the controller class:

sObjectName = "Opportunity";

Then you could use this in your markup:

object-api-name={sObjectName}

This tells the lwc engine to look for a Javascript variable called sObjectName and display that value (which resolves to "Opportunity")