T
TanStack•5mo ago
genetic-orange

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>
    )}
/>
<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(),
    });
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>}
No description
4 Replies
other-emerald
other-emerald•5mo ago
I believe the Validation Library you are using would need to provide information about that. For the min/max chars you might be able to grab the Error that is returned by the Schema Lib. I'm using Valibot and it returns Issues like this: 
{
      kind: "validation",
      type: "min_length",
      input: "1234",
      expected: ">=8", 
      received: "4", // <-------- your 7
      message: "Invalid length: Expected >=8 but received 4",
      requirement: 8, // <------- your 4000
      path: [
        {
          type: "object",
          origin: "value",
          input: {
            password: "1234"
          },
          key: "password",
          value: "1234"
        }
      ],
      issues: undefined,
      lang: undefined,
      abortEarly: undefined,
      abortPipeEarly: undefined
    }
{
      kind: "validation",
      type: "min_length",
      input: "1234",
      expected: ">=8", 
      received: "4", // <-------- your 7
      message: "Invalid length: Expected >=8 but received 4",
      requirement: 8, // <------- your 4000
      path: [
        {
          type: "object",
          origin: "value",
          input: {
            password: "1234"
          },
          key: "password",
          value: "1234"
        }
      ],
      issues: undefined,
      lang: undefined,
      abortEarly: undefined,
      abortPipeEarly: undefined
    }
genetic-orange
genetic-orangeOP•5mo ago
Yeah but you only know that when you have an error, supposedly after a submission I'd like to know that before, as an information
other-emerald
other-emerald•5mo ago
I don't think there is more that TSF provides to help you in that case
genetic-orange
genetic-orangeOP•5mo ago
I think I'm on to something. Arktype can transform a schema to a JSON Schema which looks like this: 
{
    "$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"
    ]
}
{
    "$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"
    ]
}
Which I can then use in my use case. I wonder if there is some way to "inject" that into TSF from a useForm() to re-use deeper, like in my case in a <form.AppField /> I suppose it could even be used for more accessibility stuff like adding maxlength to inputs

Did you find this page helpful?