Salesforce Consulting Blog

INTRODUCTION/SCENARIO

While working on the Lightning Web Components for our most recent project, a Banking website for our client's business in Naples, Florida, USA. we came across a scenario where had to validate the input field accepting a value between 1 to 150,000 and formatted with leading $ sign.

CHALLENGE

We implemented this functionality using LWC, but challenging part was formatting the input value with $ sign using an input element of HTML.

APPROACH / SOLUTION

We've used lightning-input instead of an HTML input element. The Lightning input field itself has attributes with validation as well as a format for currency. We only need to set attributes as per the requirement and, it would perform the desired action in the OOTB manner.

A Lightning Web Component renders UI that must include an HTML file, a JavaScript file, and a metadata configuration file.

Every UI component must have an HTML file with the root tag <template>.

myComponent.html

<template>
    <div class="slds-card">


        <!--show hide the form based on the validation-->
        <template if:true={showAmountInputBox}>


            <div class="slds-p-around_medium">
                <h2>Tell us what you need</h2>
                <lightning-input type="number" formatter="currency" step="1" 
                class="form-control is-invalid" onfocusout={checkAmountValue} value={inputAmount}
                label="How much would you like to borrow?">
                </lightning-input>
            </div>


        </template>

    <!-- Check on focusout of the box if amount is between $1 to $150000 -->
    <template if:true={greaterAmount}>
        <p class="slds-p-around_medium">Amount must not be greater than $150000. </p>
    </template>
    <template if:true={lesserAmount}>
        <p class="slds-p-around_medium">Amount must not be less than $1. </p>
    </template>
    </div>
</template>

myComponent.js

import { LightningElement,track } from 'lwc';

export default class myComponent extends LightningElement {


    @track inputAmount; // to store amount from input box
    @track greaterAmount=false; // check if amount is greater than $150000
    @track lesserAmount=false; // check if amount is less than $1
  
// handle onfocusout event to verify input amount


 checkAmountValue(event){
    const typedValue = event.target.value;
        
    if(typedValue !== undefined){
        event.target.value=typedValue;
    }

    this.inputAmount=typedValue;
    this.showPrevNext = false; 

    if(this.inputAmount>150000){ 
        this.greaterAmount=true; 
        this.lesserAmount=false; 
     } 
     else if(this.inputAmount<1){ 
        this.lesserAmount=true; 
        this.greaterAmount=false; 
    }
    else if(this.inputAmount === "" || this.inputAmount == null || this.inputAmount < 150000 || this.inputAmount >1){
        this.greaterAmount=false; 
        this.lesserAmount=false; 
   }
    
 }
    
}

myComponent.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> 
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myComponent"><apiVersion>45.0</apiVersion> 
    <isExposed>true</isExposed> 
    <targets> 
        <target>lightning__AppPage</target> 
        <target>lightning__RecordPage</target> 
        <target>lightning__HomePage</target> 
        <target>lightningCommunity__Page</target> 
        <target>lightningCommunity__Default</target> 
    </targets> 
</LightningComponentBundle>