0

I have a custom data table and I wish to validate Desired_quantity for each row but I'm having trouble with creating a unique class for lightning-input component and fetching it using queryselector.

Any help would be greatly appreciated.

          <template for:each={selected} for:item="select" >
              <tr class="slds-hint-parent" key={select.id}>
                 <td>
                    <div class="slds-truncate">{select.Name}</div>
                 </td>
                 <td>
                    <div class="slds-truncate">{select.Brand}</div>
                 </td>
                 <td>
                   <div class="slds-truncate">{select.MRP}</div>
                </td>
                <td>
                 <div class="slds-truncate">{select.Stock}</div>
                </td>
                <td>
                 <div class="slds-truncate">
                    <div class="slds-m-bottom_small">
                    <lightning-input
                       class=".inp1"
                       type="number"
                       name={select.id}
                       value={select.Desired_quantity}
                       label="Product Quantity"
                       onchange={updateQuantity}
                       ></lightning-input>
                 </div>
              </div>
              </td>
              <td>
                 <div class="slds-truncate">
                    <lightning-button variant="destructive"
                    label="Remove" 
                    title="Destructive action"
                    name={select.id}
                    onclick={remove} 
                    class="slds-m-left_x-small">
        </lightning-button></div>
                </td>
              </tr>
           </template>

JS

updateQuantity(event){

    var inputCmp = this.template.querySelector(".inp1");

    var index = 0;

    for(var i of this.selected){
        if(event.target.name==i.id){
            break;
        }
        index++;
    }


    if(event.target.value < this.selected[index].Stock){
        this.selected[index].Desired_quantity = event.targe.value;
        inputCmp.setCustomValidity("");
    }
    else{
        inputCmp.setCustomValidity("error");
    }

    //console.log("updated selected products:=>" + JSON.stringify(this.selected));
}
0

You can do something like this

<template for:each={selected} for:item="select" for:index="index" >
....
 <lightning-input
                       data-target-id={index}
                       type="number"
                       name={select.id}
                       value={select.Desired_quantity}
                       label="Product Quantity"
                       onchange={updateQuantity}
                       ></lightning-input>
</template>

JS

updateQuantity(event){

var index = event.target.dataset.targetId;
var inputfield=this.template.querySelectorAll("lightning-input")[index];

if(event.target.value < this.selected[index].Stock){
        this.selected.Desired_quantity = event.target.value;
        inputfield.setCustomValidity("");
    }
    else{
        inputfield.setCustomValidity("error");
    }
}

if you have lightning input outside the table in that case

 <lightning-input
                       data-target-id={index}
                       type="number"
                       class="test"
                       name={select.id}
                       value={select.Desired_quantity}
                       label="Product Quantity"
                       onchange={updateQuantity}
                       ></lightning-input>

and in JS just replace lightning input with class name

var inputfield=this.template.querySelectorAll(".test");
| improve this answer | |
  • not working as I already had another lightning-input outside of the table and when the code is like var inputfield=this.template.querySelectorAll("lightning-input")[1]; it does not update the value. – J.Rosnovski Apr 24 at 10:31
  • @J.rosnovski i have updated the answer – User6670 Apr 24 at 10:37
  • var inputfield=this.template.querySelectorAll(".test"); console.log("val===" + inputfield.value); var index = event.target.dataset.targetId; console.log("index===" + index); first console gives output undefined and second output gives correct output according to the loop. – J.Rosnovski Apr 24 at 10:53
  • @yashasvi2 yes that is correct why do you need inputfield.value you can just use event.targe.value; – User6670 Apr 24 at 11:02
  • works what I did was var index = event.target.dataset.targetId;var inputfield=this.template.querySelectorAll(".test")[index]; and then it works for every row .Thanks – J.Rosnovski Apr 24 at 11:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.