EP-04 | Create a form & Bind Expressions from Javascript in LWC

EP-04 | Create a form & Bind Expressions from Javascript in LWC | LWC Stack ☁️⚡️

Kapil May 26, 2021

LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together ! Please check complete code below from LWC Stack EP-04

HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
<template> <lightning-card title="Bind Expressions from JS" icon-name="utility:user"> <div class="slds-var-m-around_medium"> <lightning-input name="fullName" label="Full Name" onchange={handleChange}> </lightning-input> <lightning-input type="tel" name="phone" label="Enter Mobile No." onchange={handleChange}> </lightning-input> <lightning-input type="email" name="email" label="Email" onchange={handleChange}> </lightning-input> </div> <div style="padding:10px"> <table border="1"> <tr> <td>Full Name : </td> <td>{upperCase}</td> </tr> <tr> <td>Email : </td> <td>{email}</td> </tr> <tr> <td>Phone : </td> <td>{phone}</td> </tr> </table> </div> </lightning-card> </template>

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
import { LightningElement } from 'lwc'; export default class BindExpressionsfromJS extends LightningElement { fullName = ''; email = ''; phone = ''; handleChange(event) { const field = event.target.name; if (field == 'fullName') { console.log('###Inside Full Name'); this.fullName = event.target.value; } else if (field == 'email') { this.email = event.target.value; } else if (field == 'phone') { this.phone = event.target.value; } } get upperCase() { return `${this.fullName}`.toUpperCase(); } }