To display lightning-formatted input fields and show their values in Salesforce LWC (Lightning Web Component), follow these steps:
Step 1. Set Up the Input Fields
Use the <lightning-input> tag in your HTML file to create input fields.
Example:
<template>
<lightning-card title="User Details">
<!-- Input fields -->
<lightning-input type="text" label="Name" value={name} onchange={handleInputChange}></lightning-input>
<lightning-input type="email" label="Email" value={email} onchange={handleInputChange}></lightning-input>
<!-- Display values -->
<p>Name: {name}</p>
<p>Email: {email}</p>
</lightning-card>
</template>
To display lightning-formatted input fields and show their values in Salesforce LWC (Lightning Web Component), follow these steps
1. Set Up the Input Fields
Use the <lightning-input> tag in your HTML file to create input fields. Example:
<template>
<lightning-card title="User Details">
<!-- Input fields -->
<lightning-input type="text" label="Name" value={name} onchange={handleInputChange}></lightning-input>
<lightning-input type="email" label="Email" value={email} onchange={handleInputChange}></lightning-input>
<!-- Display values -->
<p>Name: {name}</p>
<p>Email: {email}</p>
</lightning-card>
</template>
STep 2. Define JavaScript Properties
In your .js file, create properties to hold the values and a method to handle input changes.
import { LightningElement } from 'lwc';
export default class DisplayInputFields extends LightningElement {
name = ''; // Property for Name
email = ''; // Property for Email
// Method to update properties when input changes
handleInputChange(event) {
const fieldName = event.target.label.toLowerCase(); // Gets the label (e.g., "name")
this[fieldName] = event.target.value; // Updates the corresponding property
}
}
Result
-
When you type into the input fields, the handleInputChange method updates the name and email values in real time.
-
These updated values are shown below the input fields using {name} and {email}.
