LWC Field Schema in HTML

Question

I was wondering how to connect the FieldApiName from the schema and html in the right way and haven't found any useful information yet:

My First approach was like this:

value={Account[ACCOUNT_FIELD_FIELD.fieldApiName]} 

which is sadly not working.

I have experimented some more and this my current version:

<lightning-input 
 label="I would like to use the Schema Label here"
 value={Account.field__c}>
</lightning-input>

import ACCOUNT_FIELD_FIELD from 
'@salesforce/schema/Account.field__c';

get field(){
    return this.Account[ACCOUNT_FIELD_FIELD.fieldApiName];
}

So obv i could use a getter like the one I defined in JS but it feels like I'm wasting a lot of space with it.

So now to my questions:

1. What would you say is the best way to put the value from a Field into the lightning-input component?
2. is their another way than apex to get the label of the field?

this is my first question here please tell me if i have done some mistakes in how I wrote my Question(s).

Edit:

Im trying to maintain the structure of a Record Object as my actual use is more complex. so creating a @track var / getter for every field value is something that I would like to avoid.

Answer 1

IN CASE OF MANY FIELDS

import { LightningElement, wire, track, api } from 'lwc';

export default class TestCmp extends LightningElement {
    @api recordId;
    @track listOfFields = ['Name', 'Industry', 'Website'];
}

<lightning-record-edit-form record-id={recordId} object-api-name="Account">
            <template for:each={listOfFields} for:item="fieldName">
                <lightning-input-field key={fieldName} field-name={fieldName}></lightning-input-field>
            </template>
</lightning-record-edit-form>

Record Edit Form Documentation

IN CASE OF SINGLE FIELD

JS File

import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_OBJECT_NAME from '@salesforce/schema/Account.Name';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import { LightningElement, wire, track } from 'lwc';

export default class TestCmp extends LightningElement {
    @track fieldLabel = '';
    @track fieldValue;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
        wiredOI({error, data}) {
            if (data) {
                this.fieldLabel = data.fields[ACCOUNT_OBJECT_NAME.fieldApiName].label
            }
        } else if (error) {
            console.error('error');
        }
}

HTML file

<lightning-input
    label={fieldLabel}
    value={fieldValue}>
</lightning-input>

Answer 2

You can get Account object info and the record you want to load.

HTML as below:

<template>
    <template if:true={show}>
        {accountFields.Name.label} : {accountRecord.Name.value}
    </template>
</template>

JS:

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class Poc extends LightningElement {
    @api recordId = '00128000009j45qAAA';

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountInfo;

    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] })
    account;

    get accountFields() {
        return this.accountInfo.data.fields;
    }

    get accountRecord() {
        return this.account.data.fields;
    }

    get show() {
        return this.accountInfo.data && this.account.data;
    }
}

This is enough for you to get all the fields info of account and also the record data (for all fields) that you want to load.