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
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>
OUTPUT
SUMMARY
Hence, we have validation implemented with the formatting applied using the attributes of Lightning Input without any custom function OR JavaScript.
If you have any questions you can reach out to our Salesforce Consulting team
here.
