How to fetch Inputs in Lightning Web Components

Updated: Jul 16

Lightning web components and Aura Components are like chalk and cheese, almost everything is different in LWC. To get started in LWC, reading input fields are really important. This article is going to explain all the ways user inputs can be read.


1. Using property -


We have bind a property "name" to lightning-input tag, and if any change happen in this field, it will call "nameChange" handler.


<!-- lwcinputs.html -->

<template>

<p>Hello, {name}!</p>

<lightning-input label="Name" value={name} onchange={nameChange}></lightning-input>

</template>



We have declared a track decorator "name", and in nameChange handler, assign the target value which call this handler.


// lwcinputs.js

import { LightningElement, track } from 'lwc';


export default class Lwcinputs extends LightningElement {

@track name;


nameChange(event) {

this.name= event.target.value;

}

}











2. Using getters -


In this example, we have a onchange handler on input field and we are getting value using "userName" getter.


<!-- lwcinputs.html -->

<template>

<br>

<div style="width:200px; padding-left:50px">

<p>Hello, {userName}</p>

<lightning-input label="Name" name="inp1" onchange={nameChange}></lightning-input>

</div>

</template>



When user enter something it will call nameChange handler, and will check the name of input filed, if it is "inp1", it will update name decorator. Getter "userName" will return the latest value of name decorator.


import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {

@track name;

nameChange(event) {

if(event.target.name=='inp1')

this.name= event.target.value;

}


get userName()

{

return this.name;

}

}



3. Using querySelector -

querySelector -  returns the first element within the template that matches the specified selector, or group of selectors. If no matches are found, null is returned.



So, we have one input field (input1), a lightning button with onclick handler "handleClick".




The querySelector will find first "lightning-input" element. In next statement we are storing element value in decorator "name". Remember don't try to use querySelector with field name, because browser change the name to unique name and that will be different from what you have entered.


4. Using querySelectorAll -

querySelectorAll - returns a list representing a list of the template elements that match the specified group of selectors.



There are two lightning-input, a button which call handleClick.


in handleClick function, querySelectorAll will return a list of lightning-input element.

Next a forEach loop check each element name and assign to appropriate decorator.

Instead of using field type, we can also use class name in querySelectorAll.

for e.g.

<lightning-input class="inp" label="Enter Name" name="input1"></lightning-input> <lightning-input class="inp" label="Enter Age" name="input2"></lightning-input>


both field have same class "inp".

var inp=this.template.querySelectorAll(".inp");


rest of the code will be same.


Spring 20 Updates

The @track Decorator Is No Longer Required for Lightning Web Components

Click on below link for more information on @track

Click Here

13,530 views1 comment

©2019 by SFDC Blogs.