V7 get formState.errors

[wdfinch]

I'm wondering if there's any way we could get formState.errors before the first onChange or onBlur event. while formState.isValid is run immediately, we don't have access to the errors until later.

[bluebill1049]

can you elaborate on this? an example?

[wdfinch]

Sure. So in the example below, the field is required and therefore formState.isValid returns false as you would expect. However, the formState.errors object just returns an empty object initially. It won't contain the actual the error message until the first onBlur event of the field.

Now in most cases, this is fine because we don't really want to show an error message until the first onBlur event. However, there are cases where I want to show an error message immediately without the user touching the input. Mostly form libraries like react-final-form and formik always have the string error present if there is one. It's then up to the user to add in isTouched if they only want to show the error after the first blur. I think formState.errors should work more like this and it should be up the user to use other formState properties to decide how to display the error rather than assuming they always want onBlur.

Additionally, this would help solve that other issue I mentioned regarding having more visibility into which fields are invalid (assuming a string error message is returned).

https://codesandbox.io/s/react-hook-form-controller-template-forked-v8mtr?file=/src/index.js

[bluebill1049]

you can do a trigger() to get all the errors?

[wdfinch]

That works. I thought trigger just updates the formState.isValid property. Thanks for the help. I still think it makes sense to have the errors always present without having to call trigger but this solves my issue. Thanks

[irshadahmad21]

I have a similar situation where I have the form as a subset of the data that I need to validate., i.e. some part of the page lies outside the form handled by RHF which needs to be validated. So my onSubmit looks something like this:

async function onSubmit( event: React.MouseEvent<HTMLButtonElement, MouseEvent> ) {
    e.preventDefault();
    if (thereAreErrorsOutSideRHF) {
        return;
    }
    
    await trigger();
    
    if (! isValid) {
        // Show errors
        console.log(errors);
        return
    }

    // All good
    handleSubmit(rhfOnSubmit);
}

The errors via that console.log are not reflected immediately and thus I have to resort to useDefect to set a flag to ensure errors are updated.