T
TanStack4w ago
tame-yellow

Get Field Group Errors That Were Set on Individual Fields

I have a withFieldGroup component that has 2 fields in it. I've used the validators prop on <group.Field> to set up validation for each field. I'd like to combine the errors for both fields into one, which means I need to access the errors for both fields outside of each field's respective <group.Field>. I've tried a few ways to do this: 1. Access errors for the whole form and then drill down
const { errors } = useStore(group.form.store, state => state);
const { errors } = useStore(group.form.store, state => state);
This remains an empty array when I enter invalid values. Presumably this is because I haven't set the errors at the form level. 2. Access errors for fields from the whole form via fieldMeta
const { fieldMeta } = useStore(group.form.store, state => state);
const errors = fieldMeta[fieldName].errors;
const { fieldMeta } = useStore(group.form.store, state => state);
const errors = fieldMeta[fieldName].errors;
To be able to do this, I need to provide the field name, which could be an arbitrary deeply nested key in my form schema. e.g. some.deeply.nested.array[0].in.another.array[0].etc.etc 3. Access errors for fields from the group via group.getFieldMeta
const errors = group.getFieldMeta('fieldName').errors;
const errors = group.getFieldMeta('fieldName').errors;
Here, I only need the fieldName as per the schema of the field group, which is fine because I know the field names within the context of the field group. This actually exposes the errors I'm expecting, but the type of the errors array is any[], which isn't ideal. I know that accessing a field's errors from within the field e.g. field.state.meta.errors gives you properly typed errors, which is preferred, I'd like the same nicely typed errors. 4. Access errors for the group
const errors = useStore(group.store, state => state.errors);
const errors = useStore(group.store, state => state.errors);
This would be ideal but there is no errors property 🙁 just values. I'm looking for the best way to do this that requires as little magic as possible and gives me nicely typed errors. I'd love for you to tell me that I've missed something obvious. 😅
2 Replies
conscious-sapphire
conscious-sapphire4w ago
There's a feature request for this! https://github.com/TanStack/form/issues/1652
GitHub
No way to access errors for a group defined with withFieldGroup ...
Describe the bug When defining a group using withFieldGroup, it would be helpful to get a list of all of the errors for the group. As an example, I have an address group. I&#39;d like to render a l...
conscious-sapphire
conscious-sapphire4w ago
it's definitely planned, we just haven't gotten around to it yet

Did you find this page helpful?