LWC:Getting error while setting Custom Validity Error Messages in LWC form ' [Cannot read property 'setCustomValidity' of undefined]'

Question

I want to check if field is empty before moving to other part of form divided by div. on a button(not submit) have tried custom validation as given in documentation lightning-input-documentation but i'm getting error

[Cannot read property 'setCustomValidity' of undefined]

HTML:

<lightning-input-field
    required
    field-name="AccountId"
    value={account__c}
    class="inputCmp"
></lightning-input-field>

JS:

var inputCmp = this.template.querySelector(".inputCmp");
var value = inputCmp.value;
 
if (!value) {
    inputCmp.setCustomValidity("Please select account");
} else {
    inputCmp.setCustomValidity(""); 
}
inputCmp.reportValidity(); 

Answer 1

Are you executing that in the connectedCallback()? If so, move it to renderedCallback(). In the connectedCallback the dom is not still available.

Edit: sorry but I didn't noticed you were executing it from a button. The code confused me and I wasn't allowed to write comments yet.

As I wrote below, I suppose that the problem is that the class is being set in the input shadow DOM, so you don't have access to it.

You can try with querySelector("lightning-input-field") if it's the only input, or query it in another way.

Edit2: You can also do it like this:

const inputFields = this.template.querySelectorAll(
    'lightning-input-field'
);
if (inputFields) {
    inputFields.forEach(field => {
        if(field.name === "AccountId) {
            //Your Logic
        }
    });
}

Answer 2

For field "AccountId" you can use this object hierarchy to set error to lightning-input-field.

handleSubmit(events){
  let f = this.template.querySelector('.inputCmp');
  f.setErrors({'body':{'output':{'fieldErrors':{'AccountId':[{'message':'Error'}]}}}});
}