How do I check if LWC component has a public method

Question

I have a form with inputs being either standard LWC inputs or custom lookups.
I want to validate the form and report error back to the user.
I use this.template.querySelector to get the inputs and want to call setCustomValidity on the standard inputs, and a different method on the custom lookups.

How can I test if the proxy returned from querySelector has the setCustomValidity method? hasOwnProperty does not work.

Answer 1

Below approach using JS typeof operator will determine if setCustomValidity exists on the DOM element.

const inputArray = this.template.querySelectorAll(".inp-cls");

inputArray.forEach(inp => {
    if (typeof inp.setCustomValidity === "function") {
        console.log("setCustomValidity present");
    } else {// We can check any other function as well
        console.log("call custom function");
    }
});

Here , we just query the input elements by css selector and check if setCustomValidity function exists.