I have a requirement to build a custom layout in LWC, and for that I am using lighting-record-edit-form and lightning-input-field with the required attribute.
When the user tries to submit the form on the click of a button, I need to validate and check if the required fields have been filled up.
I tried to use the following code for the same,
const allValid = [...this.template.querySelectorAll('lightning-input-field')]
.reduce((validSoFar, inputCmp) => {
inputCmp.reportValidity();
return validSoFar && inputCmp.checkValidity();
}, true);
but I am getting an error when I click the button, "Error in $A.getCallback() [t.checkValidity is not a function]"
This piece of code works fine if I try to use lightning-input instead of lightning-input-field. The need to use lightning-input-field arises as there are some lookup fields that I need to render on the form.
Would anyone happen to know how can I validate the required fields successfully, and throw an error accordingly for lightning-input-field?
lightning-record-edit-form
?