Setting Custom Errors in Custom Resolver

[rosemariesadler]

Is there a way for me to insist that my form updates all the errors on every validate instead of just the error for the field that was being modified?

I have two password fields that need to match each other. The error message only shows up on the second field, and we have our validation mode set to all. I use a custom resolver to make sure that the fields match. Additionally, my form requires one of three other fields to have something in it. Not all of them have to have anything, but at least one has to have something. I want to show a form-level error when any of the fields have been touched to say that something is required in each of those.

Here's my problems:

1. When my password fields don't match, and I go and edit the first field, formState.isValid is correct, but formState.errors doesn't contain my error for the second field until I go touch or edit the field again.
2. My error message for at least one of the fields not being empty doesn't get set until submit.

Code Sandbox: https://codesandbox.io/s/elastic-panini-hqss8

Steps to reproduce what I'm doing:

1. Type something in the first name field, go to the next field, then go back and delete what is in the first name field. Now the field is touched, but it has no value. The error message will not show up.
2. Type "passwords" in the password field.
3. Type "password" in the confirm password field. Leave the field and see the error show up saying passwords do not match.
4. Correct the initial password field to only say "password"
5. The error doesn't go away.
6. Submit the form. See that the password error disappears, and the error "first or last name is required" appears.

[bluebill1049]

Thanks for the feedback above. It's a valid one. Let me explain the reason behind a such design.

Why

RHF focus on a single input at a time to provide the best performance to your form, in your use case above is a dependency validation. This explains why the input didn't render the correct errors object as your validation focus is at Input A, while you want to show an error message for Input B.

I have considered this problem for a while now, there isn't a perfect solution on the table. If we display all the errors message, then we would lose fine control on when and what to re-render. for example, when the whole form is mounted, the entire form is full of errors (if there are no defaultValues supplied and contains validation), which would also lead the user to have to manually show and hide errors based on formState such as dirty or touched. I do open to suggestions and solutions as well, so if anyone has a better idea, feel free to follow this up.

Solution

You can trigger validation for your depend on validation, so the correct "associated" error message will be displaced.

[bluebill1049]

oh wow, that's awesome to hear! let me know if you need any help or assistance.

[bluebill1049]

This would be a great new feature. 👍

[rosemariesadler]

I know it's been more than a few days - I got sidetracked on some other projects. In any case, here is the PR: #6141. It might need some work, especially since I am unfamiliar with TypeScript.

[bluebill1049]

This is awesome! I will assist on that.

[sanmont3drepo]

Is it though? the resolver gets all the fields for validation at the same time and for example with yup it tests all the fields (even field arrays). some can fail and yup returns that, so all that computing was wasted because rhf didnt take notice of that.