Add custom validation when table is loaded in LWC

Question

I have a table with few columns. I have to add validation based on first two columns. First column is "Model Number" and second is "Part Number". I am using html table with "for:each". And data is uploaded through CSV. They only have "Model NUmber" in csv and it must match with "Part Number" else throgh error. When page is loaded, i have an input file button. "onChange" of input file i am reading records and making table view to true.

But when i try to read input fields for my validation its coming empty. I guess table is not rendered yet. How can i add validation in this case?

My code is something like this.

uploadCSV() {
   this.uploadDocumentView = true;
   let csvData = this.readCSV(); // have csvData correclty.
   this.uploadedRecords = csvData;

   // need to do validation for part number. 
   // they only have model number in CSV. It must match with data base else 
   // throw error.
   // uploaded model number must match with part number 
   let allModelNumInputs = this.template.querySelectorAll('.modelNumber');

  //allModelNumInputs -->coming empty.i guess its not rendered in the UI yet.

  allModelNumInputs.forEach(element => {
    console.log('element.value::'+element.value);
  });
}

<lightning-input onchange={uploadCSV} otype="file" name="Upload" 
   accept=".csv" ></lightning-input>
<template if:true={uploadDocumentView}>
<template for:each={uploadedRecords} for:item='rec' for:index="index">
    // here i have input field for Model number and output for part number 
    <lightning-input class="modelNumber" data-item={index} value= 
       {rec.Model_Numnber__c}></lightning-input>

       <div>{rec.Part_Number__c}<div>
    ......
</template>

I tried different events of input file for my validation, but no luck. If possible i don't want to make extra component for this. Any help will be highly appropriated.

Thanks, Manohar

Answer 1

You can use renderedCallback as follows:

renderedCallback(){
    if (this.upoadedRecords) {
        this.upoadedRecords.forEach(element => {
            console.log("element => ", element.Model_Numnber__c, element.Part_Number__c);
        });
    }
}

This method is called everytime time the DOM is rerendered and DOM is rerendered when api or track variables change. So you can have some manual mechanism to check whether upoadedRecords are changed. For example you can have:

renderedCallback(){
    if (this.upoadedRecords && this.upoadedRecordsChanged) {
        this.upoadedRecords.forEach(element => {
            console.log("element => ", element.Model_Numnber__c, element.Part_Number__c);
        });
        this.upoadedRecordsChanged = false;
    }
} 

upoadedRecordsChanged can be set to true in any method where upoadedRecords is getting updated