Using variables in LWC

Question

I'm trying to prepopulate a field in a lightning web component to create new records and just not sure how to do it.

import { LightningElement} from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import STARTDATE_FIELD from '@salesforce/schema/Account.Start_Date__c';

export default class AccountCreator extends LightningElement {
    accountObject = ACCOUNT_OBJECT;
    nameField = NAME_FIELD;
    startDateField = STARTDATE_FIELD;
    myValue = new Date();

    handleAccountCreated(){
        // Run code when account is created.
    }
}

I've tried declaring var today = new Date(); and passing today in, but it just keeps returning nothing to the component on the page.

For good measure, here's the HTML

<template>
    <lightning-record-edit-form object-api-name={accountObject} onsuccess={handleAccountCreated}>
        <lightning-messages></lightning-messages>
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-2">
                <lightning-input-field field-name={nameField}></lightning-input-field>
                <lightning-input-field field-name={startDateField} value={myValue}></lightning-input-field>
            </div>
         </div>
        <lightning-button type="submit" variant="brand" label="Create Account"></lightning-button>
    </lightning-record-edit-form>
</template>

Answer 1

You need to call the part of the field that the input field can understand. When you do an import from Schema you are pulling in a ridiculous amount of information about the field, not just the field name.

You will see if you log your imported variable that you have the full describe. Instead you need to store the fieldApiName piece of that import. See below:

import { LightningElement} from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import STARTDATE_FIELD from '@salesforce/schema/Account.Start_Date__c';

export default class AccountCreator extends LightningElement {
  accountObject = ACCOUNT_OBJECT;
  nameField = NAME_FIELD;
  startDateField = STARTDATE_FIELD;
  myValue = new Date();

  handleAccountCreated(){
     // Run code when account is created.
  }
}

and your HTML should be:

<template>
<lightning-record-edit-form object-api-name={accountObject.objectApiName} onsuccess={handleAccountCreated}>
    <lightning-messages></lightning-messages>
    <div class="slds-grid">
        <div class="slds-col slds-size_1-of-2">
            <lightning-input-field field-name={nameField.fieldApiName}></lightning-input-field>
            <lightning-input-field field-name={startDateField.fieldApiName} value={myValue}></lightning-input-field>
        </div>
     </div>
    <lightning-button type="submit" variant="brand" label="Create Account"></lightning-button>
</lightning-record-edit-form>
</template>

One thing you should also understand is that your template in this state will throw an error that objectApiName could not found for undefined or fieldApiName could not be found for undefined.

This is going to be due to your import not being accessible during the construction of your template. This however will be available once the connectedCallback has been reached in the lifecycle. The easiest way to handle this is to set a rendered attribute on your HTML to then show your component once this has happened. Like this:

<template>
    <lightning-spinner if:false={rendered} size="small" alternative-text="loading..." variant="brand" ></lightning-spinner>
    <template if:true={rendered}>
        <lightning-record-edit-form object-api-name={accountObject.objectApiName} onsuccess={handleAccountCreated}>
            <lightning-messages></lightning-messages>
            <div class="slds-grid">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input-field field-name={nameField.fieldApiName}></lightning-input-field>
                    <lightning-input-field field-name={startDateField.fieldApiName} value={myValue}></lightning-input-field>
                </div>
             </div>
            <lightning-button type="submit" variant="brand" label="Create Account"> </lightning-button>
         </lightning-record-edit-form>
    </template>
 </template>

your JS:

import { LightningElement, track } from 'lwc';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import STARTDATE_FIELD from '@salesforce/schema/Account.Start_Date__c';

export default class AccountCreator extends LightningElement {
  accountObject = ACCOUNT_OBJECT;
  nameField = NAME_FIELD;
  startDateField = STARTDATE_FIELD;
  myValue = new Date();
  @track rendered = false;

  connectedCallback(){
     this.rendered = true;
  }

  handleAccountCreated(){
     // Run code when account is created.
  }
}

Upon your form loading, you will see your spinner disappear, and your form will now be loaded and displaying the fields that you have imported.