Custom message to formSchema in TanTack Form Standard Schema
How to customize error messages i this example?
const formSchema = type({
firstName: 'string >=3',
lastName: 'string >=3',
});
I tried .configure but could not get any change on it. Please point me to any working docs or example. Thx.
15 Replies
Did you try configure on the values themselves? Can you give an example of what you tried and the behavior you expect?
(e.g.
type("string >= 3").configure({ message: "Fail" }))
We also have plans to create a dedicated walkthrough page for error message customization, as I know the information can be a bit scattered at the moment:
https://github.com/arktypeio/arktype/issues/1419const formSchema = type({
firstName: 'string >= 3'
}).configure({ message: "My message" })
geting firstName must be at least length 3 (was 2)
i expect my message will be priorotized
You need to configure the individual values rather than the root object:
It wouldn't usually make sense to have a single error message apply to all properties of an object like that.
ok, i will try it, thx.
I can confirm that it works. I use this form now:
const formSchema = type({
firstName: type('string >= 3').configure({ message: 'First name must be at least 3 characters long!' }),
lastName: type('string >= 3').configure({ message: 'Last name must be at least 3 characters long!' }),
});
Cool, that is pretty close to the default as well.
Once we implement key aliases for errors, you should be able to get a result like this without having to rewrite the message at all
https://github.com/arktypeio/arktype/issues/1431
GitHub
Error-specific property aliases · Issue #1431 · arktypeio/arktype
From Discord user @_stuartb: Is there a way to set an alias for a property name, which will be shown before the "must be" in errors? E.g. if I have a property 'dob' that holds a d...
Now i am wondring how to set condition >=3 and <=10...
That's on me as these kinds of granular error config scenarios definitely need more docs.
Will be sure to add those soon!
i achieved it like this:
const formSchema = type({
firstName: type('string >= 3 & string <= 10').configure({
message: 'First name must be between 3 and 10 characters long!',
}),
lastName: type('string >= 3 & string <= 10').configure({
message: 'Last name must be between 3 and 10 characters long!',
}),
});Cool that works if you want the same mesasge for both
Your solution has 2 different messages, - much better!
If you want you could write a little wrapper that defines a string based on its min and max length like this so you could call it like
boundedString(3, 10, "Last name") and get those error messagesIt works perfectly, need to dive deeper to construct exact messages for every field.
Thank you for your help.
No problem! Good luck 🙂
You are right, docs are needed, but then it will be perfect.
Trying to build dynamic field.Form together with ArkType
const formSchema = type({
firstName: type.string
.atLeastLength({ rule: 3, meta: { message: 'First name must be at least 3 characters long!' } })
.atMostLength({ rule: 10, meta: { message: 'First name must be at most 10 characters long!' } }),
lastName: type.string
.atLeastLength({ rule: 3, meta: { message: 'Last name must be at least 3 characters long!' } })
.atMostLength({ rule: 10, meta: { message: 'Last name must be at most 10 characters long!' } }),
});
type FormValues = typeof formSchema.infer;
const fieldConfigurations = [
{
name: 'firstName',
label: 'First Name',
type: 'text',
validators: {
onChange: formSchema.firstName,
},
},
later i pass validators={field.validators} in form.Field
but i cannot find way how to extract formSchema.firstName
Standard Schema can get validators only direct into useForm?