useController with schema-based form validation (yup resolver)

[W3Max]

Hi,

I'm struggling with "useController" & "schema-based form validation/resolvers" (yup) in the context of a reusable form component (InputField).

Inside a reusable form component (InputField), how can I pass/access the "rules" property that should come from yup configuration/schema to useController({name, **rules**})?

Are "useController" and "schema-based form validation with resolvers" incompatible things?

Sorry if that does not make sense. I'm just starting with react-hook-form.

Thank you!

[bluebill1049]

you can't use both rules and schema at the same time, it's either.

[W3Max]

Thank you,

Maybe my question should have been : are rules automatically set when using providers (like yup) and useController, ie, I should not pass anything to the "rules" property? Like this : useController({name})

I tried testing but fieldState.invalid is always false no matter what I try (rules or yup provider).

I tried with Controller and useController without success.

Any ideas?

Thanks again for your help!

[bluebill1049]

provide a simple codesandbox.

[W3Max]

All good thanks!

[luanmm]

I think it could be supported to allow some advanced use-cases.

For instance: I have a dynamic form, where rules come from the database, previously edited by a user (you can think of it as a dynamic form builder, like Google Forms or similar). So I have different "types" of fields, in which each one of them has specific "sub-fields" (or we can think of multiple field types being represented as objects with "sub-properties", like some selection/input and a comment, for instance). And the entire form, basically, is composed by a "fields" property in its schema (which is an array, that could be any of the field types).

In this scenario, I can define my "form schema" (using yup, Zod, etc) as I stated above, requiring a "fields" array that may be in any of the pre-defined field types. But there is something that is not ideal: I cannot isolate my fields as components (one for each type, aiming structure decoupling/reuse).

It would be very helpful if "useController" hook could accept its own schema (not for the entire form, obviously, but only for the "field" it controls). In case of "schema collision" (form and field being both defined), maybe it could merge them (or just keep only the more specific one).

I don't know if I was totally clear here, but hope this idea makes any sense (I do not discard the possibility of my misunderstanding some aspects of the library's architecture/usage).

[jasiene]

I'd find the above super helpful, too; at a high level, it allows us to compose parts of a form more easily. i.e. within some Input which use useController, we can also specify the schema for that specific input, rather than at the user level.