INTRODUCTION/SCENARIO
CHALLENGE
APPROACH / SOLUTION
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>