0

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

  • try to add if:true={upoadedRecords} to for:each block – rahul gawale Aug 6 at 9:39
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

  • thank you @salesforce-sas once agian. – Manohar Aug 9 at 12:13

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.