Add meta prop to Field, FastField

[Dremora]

Feature

Current Behavior

<Field> component, when using with a custom component or render prop, passes down the following structure to the component being rendered: { field: { name, onBlur, onChange, value }}. Extraction of touched and error for a particular field has to be done manually. This becomes quite painful when dealing with deeply nested fields. For instance, when accessing errors.foo.bar, one needs first to check the existence of errors.foo: errors.foo && errors.foo.bar.

Desired Behavior

Pass down the following structure: { field: { error, name, onBlur, onChange, touched, value }}.

Info

There is at least one caveat: <input> and other HTML elements should not receive those extra properties. It might make sense to only implement this for render prop.

[jaredpalmer]

My plan is to add a meta prop that holds these values so that ppl can still spread field over an input

[stale]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[Dremora]

Not using formik anymore, and this was actually one of the reasons for switching. But I believe this is still on the roadmap. Any chance of doing this as part of #828?

[jaredpalmer]

Yes for sure.

[prichodko]

#579

[stale]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[jaredpalmer]

Pin

[lourenci]

What about dirty by field?

I'd like to validate my field against my schema before the field is touched.

[IronSean]

In the documentation here: (https://jaredpalmer.com/formik/docs/api/fieldarray) it says as of

Formik v0.12 / 1.0, a new meta prop may be added to Field and FieldArray

However, according to this that field is instead earmarked for v2. Is this already available somewhere or is the documentation incorrect?

[jaredpalmer]

It's already in v2.

[GoPro16]

Can we not also spread the meta for the field onto the component here:
https://github.com/jaredpalmer/formik/blob/next/src/Field.tsx#L189

I find it that I have to use the useField hook in order to do everything I want rather than just passing custom Input tag into the as prop of Field because i need access to the meta for additional css className rendering.

I wasn't understanding the "backwards compat" comment about the legacy component prop. If that comment holds true we should be able to pass it into the as prop.

[jaredpalmer]

Yeah I have noticed this myself during v2 usage.

[bschnelle]

@jaredpalmer can you help me understand why meta isn't passed into component?

[jaredpalmer]

Backwards compat

[bschnelle]

can you elaborate? the docs state pretty clearly that meta is made available to the component, but then it doesn't show up and only after digging into the code is it obvious why it isn't received....just curious why backwards compatibility trumps in this situation

[jaredpalmer]

That must be a bug then. Can you fix in the code?

[benesva4]

It is written incorrectly in the docs. meta is not passed to the component. I believe it should be crossed out and marked as deprecated.

[gopalakrishnan-subramani]

meta is not passed to my Input component as props, tried as per document .

Since there are many issues are reported, do we have option to access field error in Field rather than look into form error?

[sandorvasas]

meta should be passed to the component of the field! It contains field-level data and fields need to be able to easily access field-level data.

We have Field components that are also used outside of Formik forms. With redux-form, we could easily "plug & play" the required stuff into the field's input { value, onChange } and meta props. Migrating to Formik now and I can't believe I need to access the form prop of the field to get validation data. There's kinda the same problem with onChange. With redux-form it was onChange(value), which became onChange(event). If you want to do some processing on the field value before passing it to the form via onChange, you need to hack it as onChange({ ...event, target: {...event.target, value: VALUE } }). It was so much easier to just pass as onChange(value).

[gordonjl]

I was pretty surprised myself the meta data wasn't in there, despite the documentation saying it should, but I think I found a decent workaround for now, querying the form is pretty easy. Example:

interface MyFieldProps extends FieldProps {
    type:string
    label:string
}
const WrappedInputField = (props: MyFieldProps) => {
    const meta = props.form.getFieldMeta(props.field.name); // <-- the workaround.
    return (
        <Form.Group as={Col}>
...

[FREEZX]

Switched to useField for custom components, but lost some time wondering why i'm not getting the meta as described in the docs. This use case should either be removed the docs or get fixed.

[johnrom]

@FREEZX field-level meta should be the second item in the Tuple returned by useField. Form meta, however, must be accessed from useFormikContext.

const [field, meta] = useField(props); 

If meta, above, is not being passed for you, you should open a new issue. Please include a code sandbox repro if this is the case.

The issue above is specifically about meta not being passed to a component via <Field component={MyComponent} />

[FREEZX]

@FREEZX field-level meta should be the second item in the Tuple returned by useField. Form meta, however, must be accessed from useFormikContext.

const [field, meta] = useField(props); 

If meta, above, is not being passed for you, you should open a new issue. Please include a code sandbox repro if this is the case.

The issue above is specifically about meta not being passed to a component via <Field component={MyComponent} />

Sorry, seems like i wasn't clear. First i tried <Field component={MyComponent} /> and then i realised meta was not being passed in props. Lost time trying to find the cause and trying a bunch of versions only to realise it wasn't working even in 2.0.0. Switched to useField, everything's fine there.

[flora8984461]

Hi, I found this same issue, <Field component={MyComponent} /> is not passing the field prop.

While if I use const [field, meta] = useField(props); , since I'm not using field variable, it keeps giving me the warning field is defined but never used, which is not what I expect. 😥

It must indicate 2 vars, so the second can be matched with field meta props. Otherwise, I cannot get the correct prop (which is meta.error && meta.touched ) I want to use.

[johnrom]

@flora8984461 you should be able to resolve that warning with the slightly odd syntax: const [, meta] = useField(props);. You don't have to assign each variable during destructuring, you can skip it with the comma.

Or you can prefix field with an underscore. Finally, you can either remove the no-undefined eslint rule, or disable eslint for that line using a comment // eslint-disable-next-line (not recommended).

[flora8984461]

@johnrom Thanks a lot!

[Hajzenberg]

Solution form @gordonjl snippet is better than useField, since useField hooks you into context and you'll have problem with unnecessary rerenders.

[johnrom]

V3 will expose useFieldMeta(name). It is the same as getFieldMeta, but as a hook.

I think we should still revisit why fieldMeta isn't being passed automatically, since we have already retrieved that data in Field.

[ngerritsen]

I'm trying to migrate a big project from redux-form to Formik. This meta field not being present in the custom component, especially while the documentation implies it should be for some reason is really a pain! Also, this issue being open from 2018 really makes me doubt to choose Formik.

[pokinbara-german]

I'm trying to migrate a big project from redux-form to Formik. This meta field not being present in the custom component, especially while the documentation implies it should be for some reason is really a pain! Also, this issue being open from 2018 really makes me doubt to choose Formik.

Same thing, migration from redux-form, but workaround from @gordonjl helped to me. Just add const meta = props.form.getFieldMeta(props.field.name); to your field constructor or any function which parse meta prop.

[hwkiem]

Documentation really should be changed on this issue... One of the many who has been searching for this thread after digging through the formik source.

[dsosborn]

I'm so surprised this hasn't been addressed in over 4 years on such a popular library... is there any plan for implementing this? Maybe in v3? Can we help in any way? It puts a big kink in an otherwise very clean solution with our design system components.

[McTom234]

Hey! I would really love to see this fixed. I might find some spare time to prepare a PR, but wanted to ask first if there is a reason why this is not fixed yet.