lightning-input-name - how to access the validity object

Question

I am unable to access the validity state in a lightning-input-name base component and I'm unclear what I'm supposed to do:

Template:

<lightning-input-name
    required
    first-name={firstName}
    last-name={lastName}
    salutation={salutation}
    onchange={changedName}
>

I'm able to access the field values using the onchange event and the event.detail object, e.g.:

changedName(event){

    this.salutation = event.detail.salutation;
    this.firstName = event.detail.firstName;
    this.lastName = event.detail.lastName;
    this.nameValidity = event.detail.validity;

    console.log(this.nameValidity);
    console.log(JSON.stringify(this.nameValidity));

However, the validity object appears to be undefined, despite the documentation stating it should be available?

lightning-input-name documentation

This webcomponent is being implemented in a larger component with multiple different inputs, so I'd like to be able to check their validity states separately as they get updated

Answer 1

In all the samples - Salesforce seems to be accessing the component's validity attribute through a querySelector rather than the event itself.

handleClick : () => {
    var name = this.template.querySelector('lightning-input-name');
    var isValid = name.checkValidity();
    if(isValid) {
        alert("Creating new contact for " + this.name);
    }
}

Through the event, it doenst seem like the attribute is available. For the time being, I guesss we will have to stick to using querySelector's on the template itself.