LWC Playground

I noticed that "Country" field of lightning-input-address is not being tagged as required even though I used "required" tag. According to the documentation,

"required" If present, the address fields must be filled before the form is submitted.

upon using it, it does not show the "required" asterisk visually and also not being validated using js code below:

    const address = this.template.querySelector('lightning-input-address');
    const isValid = address.checkValidity();
    if (isValid) {
        console.log('all address filled up except country but the component is tagged as valid');
    } else {

if the code address.reportValidity() is executed, it will show that it did not validated the Country below.

Lightning Input Address Component validation

Is this a bug that we should submit to LWC team or is there a "workaround" to require the "Country" field?


I've run into this issue as well and think that it's a bug. The lighting-input-address has the setCustomValidityForField method that you can use to manually invalidate a field and set a message.

enter image description here

You can use it to require the Country field. Granted, it doesn't add the asterisk next to the "Country" label but it gets the job done. See example below:

var country = event.detail.country;  // Or wherever you have your country input stored.
const address = this.template.querySelector('lightning-input-address');

if (!country) {
    address.setCustomValidityForField('Complete this field', 'country');
} else {
    address.setCustomValidityForField('', 'country');

Note: When the country field is populated you will need to pass an empty string into address.setCustomValidityForField in order to clear the error otherwise the address.reportValidity() will always return false.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.