Consuming field "requiredness" in field level (RHF)

[alejandrocortes3112]

Libraries
-react 18.2.0
-MUI 5.11.3
-react-hook-form 7.43.5
-yup 1.0.2

Goal
I would like to add an asterisk to the label of fields that are required in yup.

Problem
On the level of my "InputText" I would like to know if the field is required, and in that case append an "*" to the label.
Is there a way to consume the yup schema in useController or useFormContext before the validation executes?
I prefer to avoid passing a duplicate "required" prop or a custom context since I plan to keep input components simple and reusable.

Please see link to my demo code sandbox:
https://codesandbox.io/s/red-fast-oz7qor?file=/src/components/CustomForm/CustomForm.jsx
Thank you in advance

[leapful]

@alejandrocortes3112

You can use schema.describe().fields which includes all fields, each field will have a boolean property optional to check if field is optional or not.

Working demo: https://codesandbox.io/s/bold-fire-f9wzz0?file=/src/App.tsx

[alejandrocortes3112]

Thank you @leapful this is helpful. Do you how can I access the schema in the children input component without passing it as a prop?
I would like to access that schema in the children element without passing another "required" prop.

I have access to the schema in the parent Form component but not in the children form input.
This one here https://codesandbox.io/s/red-fast-oz7qor?file=/src/components/InputText/InputText.js

[leapful]

@alejandrocortes3112

You yup schema is just a static object which can be moved to a util then you can export a util function to check if field name is required or not anywhere in you code.

Working demo: https://codesandbox.io/s/clever-sanderson-xd1d4n?file=/src/components/CustomForm/CustomForm.jsx

[houkanshan]

If the requiredness is dynamic (e.g. defined in .when()):

function isRequired<Value>(schema: yup.AnySchema, values: Value, path: Path<Value>) {
  try {
    const description = yup.reach(schema, path, values).describe({ parent: values });
    if (typeof description.optional === 'boolean') return !description.optional;
    return false;
  } catch {
    // `reach` throws error if `path` is not defined in schema, in this case it's also not required.
    return false;
  }
}

We end up switch from Zod to Yup because it's hard to get achieve in Zod