feat(core): field meta API

[harry-whorlow]

reopened from #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
  name="foo"
  meta={({ values }) => ({
    disabled: values.someOtherField == null,
    ...
  })}
>
  {(field, meta) => 
  <Comp
    disabled={meta.disabled}
    ... >
  </Comp>

---

Tasks

• [x] Meta available to Field.children
• [ ] MetaFn available to form.Field
• [ ] Tests
• [ ] LGTM 🚀

[nx-cloud[bot]]

View your CI Pipeline Execution ↗ for commit fb84fb2e51538934bf3f2d81617685f7f397e968.

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	1m 7s	View ↗
nx run-many --target=build --exclude=examples/**	❌ Failed	3s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-05-10 08:54:57 UTC

[fulopkovacs]

@harry-whorlow

Heyy 👋 ,

I'd just like to check in to see if I can help you with anything regarding this PR. ☺️ If you're stuck, please let me know, I'd love to help! :))

[harry-whorlow]

Hi @fulopkovacs sorry dude I've been bogged down in other pr's lately 🙃. I think the idea still holds merit, I didn’t get a response in the maintainers chat regarding the defaultCustomFieldMeta, perhaps I should ping it again 😄.

BUT it has been on my mind... one thing to mention is that someone questioned if this would work with the useAppForm, which although I haven't looked into did make me pause for thought.

[harry-whorlow]

@fulopkovacs

Leonardo suggested this:

Speaking of typescript, have you tried doing something similar to what we're doing with validators? With two generics on FieldApi, one for the meta coming from form and the other with the meta coming from that field

and thinking about it this could be actually exactly what were looking for. I'll try and throw something together 😄

[JosieRice]

I think I have a use case that might be similar to this

I have a need for every field in some forms to know the same info (in this case so they can disable and show info about the permissions they're missing)

const newValidationSchema = z.object({
  sectionComplete: z.boolean(),
  foregroundColor: rgbColorSchema(),
  backgroundColor: rgbColorSchema(),
  logoColor: rgbColorSchema(),
});

export function VirtualCardArtView() {
  const { user } = useUserContext();
  const isBank = user?.role === EnumUserTenantType.BANK;

  const { outstandingPermissions } = useCheckPermissions({
    requiredPermissions: [Permission.Profilewrite],
  });

  const { AppField, AppForm, ButtonForCompanyProfile, FormRow, handleSubmit } = useAppForm({
    defaultValues,
    onSubmit,
    validators: {
      onSubmit: newValidationSchema,
      onBlur: newValidationSchema,
    },
  });

  return (
    <AppForm>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          handleSubmit();
        }}
      >
        <FormRow>
          <AppField
            name="foregroundColor"
            children={({ Text }) => (
              <Text
                i18nKey="base.labels.foregroundColor"
                isDisabled={isBank}
                outstandingPermissions={outstandingPermissions}
              />
            )}
          />
        </FormRow>
        <FormRow>
          <AppField
            name="backgroundColor"
            children={({ Text }) => (
              <Text
                i18nKey="base.labels.backgroundColor"
                isDisabled={isBank}
                outstandingPermissions={outstandingPermissions}
              />
            )}
          />
        </FormRow>

        <ButtonForCompanyProfile
          isDisabled={isBank}
          outstandingPermissions={outstandingPermissions}
        />
      </form>
    </AppForm>
  );
}

I would love to be able to pass in some form level meta data that the components can just pull out of a hook . So it would look like this

export function VirtualCardArtView() {
  const { user } = useUserContext();
  const isBank = user?.role === EnumUserTenantType.BANK;

  const { outstandingPermissions } = useCheckPermissions({
    requiredPermissions: [Permission.Profilewrite],
  });

  const { AppField, AppForm, ButtonForCompanyProfile, FormRow, handleSubmit } = useAppForm({
    defaultValues,
    onSubmit,
    validators: {
      onSubmit: newValidationSchema,
      onBlur: newValidationSchema,
    },
    formMeta: {
      isDisabled: isBank,
      outstandingPermissions: outstandingPermissions,
    },
  });

  return (
    <AppForm>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          e.stopPropagation();
          handleSubmit();
        }}
      >
        <FormRow>
          <AppField
            name="foregroundColor"
            children={({ Text }) => <Text i18nKey="base.labels.foregroundColor" />}
          />
        </FormRow>
        <FormRow>
          <AppField
            name="backgroundColor"
            children={({ Text }) => <Text i18nKey="base.labels.backgroundColor" />}
          />
        </FormRow>

        <ButtonForCompanyProfile />
      </form>
    </AppForm>
  );
}

or is that more of a formMeta thing?

[harry-whorlow]

@JosieRice, thanks for the input! I got distracted for a bit closing some bug tickets. But I actually have a need, quite similarly to you, for the meta to be provided to all fields at work.

I'll pick this up after closing out my current tickets 😄

[JosieRice]

@JosieRice, thanks for the input! I got distracted for a bit closing some bug tickets. But I actually have a need, quite similarly to you, for the meta to be provided to all fields at work.

I'll pick this up after closing out my current tickets 😄

I've been meaning to get involved with more open source contributions. Would this be something I could help with in any way.

[harry-whorlow]

hi @JosieRice, I've actually been working on this for the past week, but if things change I'll let you know. 🙂

[harry-whorlow]

I've gotten sidetracked with adding the devtools to form, if someone wants to pick this up in the mean time feel free.