Hello guys I have being working on a LWC custom form that gathers information. This component has various accordion section and child components. there are sections that contains lightning comboboxes that allows the user to show or hide some child components. For instance, if the value 'B' from a combobox is selected it shows a child component. On the contrary it shows a different combobox. As I said I have various comboboxes that has this behaviour.
And also, for each one of the comboboxes section and child components I made a logic to check whether the required fields of the shown components/fields/comboboxes are filled with data. This happen when just when the user clicks on a button, so if one field is not filled the form appears again and indicates the user the unfilled fields.
But the problem comes when I do the section validation I am getting a:
PromiseResolve called on non-object error message
In this part of the code:
console.log('aqui4');
/** VALIDACION SELECTORES DE SECCION Y OTROS CAMPOS**/
if(this.seccionContacto === true){
console.log('aqui41');
let isValid = true;
const fields = this.template.querySelectorAll('.validate');
console.log('aqui42');
fields.forEach(iInputField =>{
console.log('aqui43');
if(!iInputField.checkValidity()) {
iInputField.reportValidity();
isValid = false;
console.log('aqui44');
}else{
console.log('aqui45');
isValid = true
}
})
console.log('aqui46');
if(isValid == false){
console.log('aqui47');
this.botonClicked = false;
}
console.log('aqui48');
return ;
}
In the testing I made I tried only filling a couple of sections and the others to left them empty. Could anybody tell me how to solve this?
Thanks
const fields = this.template.querySelectorAll('.validate')
this line may cause issue because it returns NodeList, which is array-like Object, try changing it toconst fields = [...this.template.querySelectorAll('.validate')]
, see if this works