How to validate LWC's XML properties?

Question

I have two properties configured through XML, they are two currencies for currency converter app, so they cannot be the same, but I don't know how to prevent this if a user types the same value for both.

When I try to check for value in setter like this:

 _quoteCurrency;
    @api get quoteCurrency() {
        return this._quoteCurrency;
    }
    set quoteCurrency(value) {
        console.log(`_quoteCurrency ${this._quoteCurrency}`);
        if (value === this.baseCurrency) {
            return;
        }

        this._quoteCurrency = value;
    }

_baseCurrency;
    @api get baseCurrency() {
        console.log(`_baseCurrency ${this._baseCurrency}`);
        return this._baseCurrency;
    }
    set baseCurrency(value) {
        console.log(`_baseCurrency ${this._baseCurrency}`);
        if (value === this.quoteCurrency) {
            return;
        }
        this._baseCurrency = value;
    }

It just breaks the view (stops responding correctly) in AppBuilder when I enter something like that - that shouldn't be allowed!

What I would prefer - on entering same value as for the other property, the current property to clean its value or show some kind of error, but I don't know how to do that. Please help :)

Answer 1

You can't actually stop the user entering bad data (they could even enter values that are not currency names - you might want to think about using a picklist data source, or even have some apex to provide the details), but what you can do is make sure your component renders a nice big error message instead of the conversion UI in this case. Since the Lightning App Builder directly renders the component, the admin will see the error message (which should also tell the admin what to do to correct the issue).

For example:

_quoteCurrency;
_baseCurrency;
badCurrencies;

@api get quoteCurrency() {
    return this._quoteCurrency;
}

set quoteCurrency(value) {
    this._quoteCurrency = value;
    this.checkCurrencies();
}

@api get baseCurrency() {
    return this._baseCurrency;
}

set baseCurrency(value) {
    this._baseCurrency = value;
    this.checkCurrencies();
}

checkCurrencies() {
    this.badCurrencies = (this.baseCurrency === this.quoteCurrency);
}       

<template>
  <template if:true={badCurrencies}>
    Both quote and base currencies are the same. The design attributes for
    this component need to be updated in the lightning page.
  </template>

  <template if:false={badCurrencies}>
    ...
  </template>
</template>

Answer 2

you can do something like this

  baseCurrency;
  quoteCurrency;
  handleBaseCurrencyChange(event) {
    this.baseCurreny = event.target.value;
  }
  handleQuoteCurrencyChange(event) {
    if (event.target.value === this.baseCurrency) {
      event.target.value = '';
      this.error = "Don't use the same value for the Quote Currency";
    }
    
    this.quoteCurrency = event.target.value;
  }

    <lightning-input type="text" label="Base Currency" onkeypress={handleBaseCurrencyChange}></lightning-input>
    <template if:true={error}>
        <div class="slds-theme_error  slds-p-around_medium">
            {error}
        </div>
    </template>
    <lightning-input type="text" label="Quote Currency" onkeypress={handleQuoteCurrencyChange}></lightning-input>

This will clean up the value and show error on UI (if you add {error} there)

UPDATE:

This option will only work if you want to control values from UI