Reset field meta data
Is there a way to reset meta data of a field? Context is a field being conditionally rendered, and there's an edge case of it being removed -> re-added where the field retains it's meta data. Haven't had any luck searching the documentation for this functionality.
10 Replies
deep-jade•8mo ago
looking in the api, theres form.resetFieldMeta utility which might achieve what your looking for.
Alternatively I'm working on the FIeld.meta API which makes the field meta data available and modifiable at the field level. But thats a work in progress and might not be finished for a week or two.
https://github.com/TanStack/form/pull/1125
GitHub
feat(core): field meta API by harry-whorlow · Pull Request #1125 · ...
Field.meta
From issue #1111 and discussion #709, this pr Introduces the Field.meta api to allow for extensible and easily accessible meta data to the field component.
example api
<form.Field...
eager-peach•8mo ago
I messed with resetting meta but I think it's not intended use. It leads to side effects and unexpected states, especially around validation. Ideally you want to design it so that the meta fields reflect the user's interaction. Fake meta is sketchy.
In our case of adding/removing fields conditionally we went the route of changing values and then revalidating at the end:
form.validateAllFields("change");
"Change" being the required reason.
This revalidation forces tanstack to reassess the field values and set correct meta.
exotic-emeraldOP•8mo ago
Thanks. I tried resetFieldMeta, but it didn’t appear to be doing anything. ValidateAllFields does seem to be doing what I need it to do, but that forces all fields to show validation errors, even if the user hasn’t touch it yet.
The more I look at it though, I think I don’t have a good understanding of what’s going on. So there’s a “parent” field where the value will conditionality render some children dependent on the parent value. I have listener on the parent, so when the children aren’t rendered, setFieldValue(‘child’, ‘’) and now validateAllFields runs. If I touch no fields in the form other than the parent, everything gets marked as invalid, but the meta for all fields is still pristine. 🤷♂️
eager-peach•8mo ago
here's your solution to the first paragraph:
error={state.meta.isTouched ? state.meta.errors[0] : null}
This will only show validation if the field has been touched.
How are you validating, with Zod?
exotic-emeraldOP•8mo ago
Yep, zod. Form level onchange
eager-peach•8mo ago
sounds like a similar situation to ours, if I'm hearing you right. Here's how we handle it:
- when fields are added/removed we update a hidden field that we use as a boolean flag, in this example 'propertyProductPresent', meaning 'Are the property product fields present in the form?'
- We then fire form.validate("change") to revalidate with the new state of fields. If we don't do this then validation errors stick around on fields the user can't change.
- in our zod schema we use superRefine for conditional validation. So for example the field 'propertyAddressLineOne' is a required field, but we initially define it as optional or an empty string like this:
propertyAddressLineOne: z.string().optional().or(z.literal("")),
and then we superRefine at the bottom of the zod schema like this:
.superRefine((data, ctx) => {
if (data.propertyProductPresent) {
if ((data.propertyAddressLineOne ?? "").length < 2) {
ctx.addIssue({
path: ["propertyAddressLineOne"],
code: z.ZodIssueCode.custom,
message: "Property street address is required",
});
}
etc. other conditional validations
exotic-emeraldOP•8mo ago
Where does that error prop go? I’m Not seeing it anywhere.
For the zod schema I went with discriminatedUnion, and made separate schemas for just the parent/child fields. Seems to be doing the job.
deep-jade•8mo ago
@MJ validateAllFields will results in the field being touched.
https://discord.com/channels/719702312431386674/1337061688268165141
exotic-emeraldOP•8mo ago
when I log state everything is as if the form was new.. nothing touched, etc... But when the validateAllFields runs it marks everything as invalid ( which I guess I would expect, since required fields don't have values.) I ended up changing validateAllFields to validate individual fields, so now its just the conditionally rendered ones that show validation errors.
deep-jade•8mo ago
sorry, yea the question mark wasn't supposed to be there. it was more a statement.😂