TanStackT
TanStack•9mo ago•
6 replies
progressive-amaranth

How to access to the validation schema inside a FieldComponent?

Is there an easy way to leverage the validation schema inside a FieldComponent?

I'd like to know if the field is required or not, and if there are some rules like "max length"/"min length" to show a characters count.

Currently have this: 

<form.AppField
    name="summary"
    children={(field) => (
        <field.FormItem className="grid gap-2">
            <field.FormLabel>
                <Trans>Summary</Trans>
                <span className="italic">
                    — <Trans>optional</Trans>
                </span>
            </field.FormLabel>
            <field.FormControl>
                <field.FormInput />
            </field.FormControl>
            <div className="text-right">
                {field.state.value?.length ?? 0} / 4000 characters
            </div>
            <field.FormMessage />
        </field.FormItem>
    )}
/>


And this is my schema:

export const editEpisodeSchema = (i18n: I18n) =>
    type({
        summary: type("string < 4000")
            .configure({
                message: i18n._("The summary must be less than 4000 characters long."),
            })
            .optional(),
    });


I'm looking to do something like this {field.{somewhere}.isOptional && <span className="italic">—<Trans>optional</Trans></span>}
screenshot_3271.png
Was this page helpful?