ValidationObserver invalid rules

[exodusanto]

Is your feature request related to a problem? Please describe.
The new invalid rule object (#1898) can be used also in the ValidationObserver.
For example, in a form, if I use the required-if rule I want to print only one error message, shared between the two fields

<form slot-scope="{...}">
  <div class="row">
    <div class="col"><custom-input rule="required_if:...|email"></div> // Component with ValidationProvider
    <div class="col"><custom-input rule="required_if:...|numeric"></div> // Component with ValidationProvider
  </div>
  <p v-if="...">One of the two fields is required</p>

Describe the solution you'd like
Include the invalid rules object in ValidationObserver slot scope

Describe alternatives you've considered
Use data value to verify if a field is empty but that's easy only with required rule.

Additional context

[logaretm]

Whats keeping me for implementing this is the issue with how the Observers are going to represent that, for example, a provider has no conflict issues. But observers will have duplicate rules from different providers.

In other words:

<p v-if="what...">One of the two fields is required</p>

What goes into that v-if, we cannot nest it from multiple providers:

<p v-if="failedRules.one.required || failedRules.two.required">One of the two fields is required</p>

Because providers name attribute is not required and the vid is also not required we cannot nest it since it will always have unexpected results and may cause rendering errors due to null/undefined access.

Feel free to suggest how you would access the information you are requesting and I will see what I can do.

[exodusanto]

Ok I got it!
The problem is how to retrieve the invalid rule if the provider hasn't the name or vid attribute

Maybe with a function we can prevent a Cannot read property 'required' of undefined exception.

getFailedRules(field: string | number): object // the failedRules object or an empty object

<p v-if="getFailedRules('one').required || getFailedRules('two').required">One of the two fields is required</p>

[phroggyy]

Just ran into this issue myself. One solution, if you want to avoid the cannot read property problem altogether, is to do something like provide a failed() function to check if something failed; failed('one', 'required'). I think that might be cleaner than providing just the failed rules, and with returning a boolean, you're more certain that if statements will work as intended (you could even do strict checks). Of course, if there is a need to get the failed rules as well, we could provide the function for that too.