Get the required fields of a complex schema (variants and unions)

[ruiaraujo012]

Hello, I'm building a React form with some complex validations, like if foo is true, bar is required, otherwise is optional.
To do that, I need to use unions and variants, and here is the problem, how can extract all the fields that are required, so I can mark the form field as required (*)? Any help please?

Thank you.

[fabian-hiller]

Object entries are required by default. I recommend to detect if a field is optional and then remove the (*).

[fabian-hiller]

How can I know what is the schema (union or variant) applied to know if the field is or not optional?

I think this is not possible because it is decided dynamically at runtime. I would try to store some information (e.g. the path to the field) in an array or object that allows you to identify each optional field. At the time you render your form, you can use this information to know if a field is optional.

// Using an array
const optionalFields: string[] = ['military.1.militaryNumber', 'person.1.address'];
const isOptional = (path: string) => optionalFields.includes(path);

// Using an object
const optionalFields: Record<string, boolean> = {
  'military.1.militaryNumber': true,
  'person.1.address': true,
};
const isOptional = (path: string) => !!optionalFields[path];

[ruiaraujo012]

I think you're right, there's no way to do that.

Like the angular forms, is there any options to dynamically add/remove validations with valibot?

[fabian-hiller]

Not sure but special or lazy could work but I only recommend to use them for very special cases or for recursive schemas.

• https://valibot.dev/guides/other/
• https://valibot.dev/api/special/
• https://valibot.dev/api/lazy/

[ruiaraujo012]

Well, I gave up from the idea of trying to extract the optional fields from the schema and instead, I pass the optional prop conditionally based on the data to the component that I want. Thanks for your help, it helped me to reach this approach :)

[fabian-hiller]

I do the same. As long as your form isn't crazy complex, this is fine.