[Feature request] dispatch event when error state changes

[thatdudemanguy]

Hello

As an addition to showsFeedbackForChanged and showsFeedbackForErrorChanged as found in the validateMixin, it would be nice to include an event that dispatches whenever the error state itself changes, and have it include all active errors.

e.g.:

<lion-input
  .validators=${[new Required]}
  @error-state-changed=${this._errorFoo}
></lion-input>

_errorFoo(e) {
   // e.validationerrors
}

[tlouisse]

Makes sense. We used to have this in the previous version of ValidateMixin.

All needed info can be found in .validationStates. Most likely a solution would be smth along the lines of:

updated(changedProps) {
   super.updated(changedProps);
  
  if (changedProps.has('validationStates')) {
     const prevStates = changedProps.get('validationStates');
     Object.entries(this.validationStates).forEach(([type, feedbackObj]) => {
       if (!deepEqual(feedbackObj, prevStates[type])) {
         this.dispatchEvent(new Event(`${type}StateChanged`, { detail: feedbackObj }));
       }
     });
  }
}

[jorenbroekema]

Agreed. For validation states JSON.stringify equality would suffice as well, not sure if we have a deepEqual util or if we wanna pull in a dependency for it

[tlouisse]

True, that was the pseudo part :)

[tlouisse]

Since error is 'more important' than other feedback types, we could consider an invalid prop and event, so we could support a situation like:

<lion-form @invalid-changed="${({currentTarget}) => {
  this._btnDisabled = currentTarget.invalid;
}}">
  <form>
    <lion-input .validators="${[new Required()]}"></lion-input> 
    <lion-button  type="submit"  .disabled="${this._btnDisabled}">Submit</lion-button>
  </form>
</lion-form>