Programatic access to field validation rules

[sazzer]

Is there any way when rendering a form field to access the validation rules defined for it?

Being more specific. I'm wanting to be able to set the appropriate HTML attributes on my rendered form fields - required, minLength, maxLength, etc - based on the validation rules defined for that field. (Which are themselves going to be generated based on the HAL-Forms template for this form, but that's another story 🙂)

I can extract the details I need from a Valibot schema well enough. But is there any way to get hold of that schema given only the FieldApi object? Or, failing that, providing some extra metadata that can itself be accessed via the FieldApi object?

Cheers

[depsimon]

Looking to achieve the same thing, asked in Discord.

It'd be great to be able to inject a JSON schema into TSF and make it available in FieldApi.

I'm using Arktype which provides a handy .toJsonSchema() method which returns this kind of schema:

{
    "$schema": "https://json-schema.org/draft/2020-12/schema",
    "type": "object",
    "properties": {
        "title": {
            "type": "string",
            "message": "$ark.message1",
            "minLength": 3
        },
        "uid": {
            "type": "string",
            "message": "$ark.message"
        },
        "summary": {
            "type": "string",
            "message": "$ark.message2",
            "maxLength": 3999
        }
    },
    "required": [
        "title",
        "uid"
    ]
}

If I could inject & access this in a FieldApi, I could do something like this:

<form.AppField
	name="summary"
	children={(field) => (
		<field.FormItem className="grid gap-2">
			<field.FormLabel>
				<Trans>Summary</Trans>
				{!form.schema.required.includes(field.name) && (
					<span className="italic">
						— <Trans>optional</Trans>
					</span>
				)}
			</field.FormLabel>
			<field.FormControl>
				<field.FormTextarea />
			</field.FormControl>
			<div className="text-xs text-muted-foreground text-right">
				{field.state.value?.length ?? 0} /{" "}
				{form.schema.properties[field.name].maxLength} characters
			</div>
			<field.FormMessage />
		</field.FormItem>
	)}
/>