Accessing errors for Field Groups

[aihdene-genetec]

Hello, right now, field groups have access to the state values of all of its fields using form.Subscribe. I was wondering if there were plans to also give access to all of the errors of the field group so that they can be displayed. The use case here is two Date app fields that form a DateRange and essentially wanting to display the errors for either fields outside of the definition of the AppField.

[aihdene-genetec]

Bump

[Zelys-DFKH]

group.Subscribe only exposes the group's values. FieldGroupState has no fieldMeta or errors; those live on the parent form's store. To read field errors outside of AppField, use useStore (re-exported from @tanstack/react-form) directly on group.form.store:

import { useStore } from '@tanstack/react-form'

const DateRangeFields = withFieldGroup({
  defaultValues: { startDate: '', endDate: '' },
  render: function Render({ group }) {
    const errors = useStore(group.form.store, (state) => {
      const startPath = group.getFormFieldName('startDate')
      const endPath = group.getFormFieldName('endDate')
      return [
        ...(state.fieldMeta[startPath as never]?.errors ?? []),
        ...(state.fieldMeta[endPath as never]?.errors ?? []),
      ]
    })

    return (
      <div>
        <group.AppField name="startDate">
          {(field) => <DateInput field={field} />}
        </group.AppField>
        <group.AppField name="endDate">
          {(field) => <DateInput field={field} />}
        </group.AppField>

        {errors.map((e, i) => (
          <p key={i} role="alert">{String(e)}</p>
        ))}
      </div>
    )
  },
})

group.getFormFieldName('startDate') resolves the local name to the full form path (e.g., 'dateRange.startDate'), so the selector reads the right slice of fieldMeta. The as never cast is needed because TypeScript can't narrow the dynamic path string to DeepKeys<TFormData>.

useStore re-renders only when the selector result changes.

For per-field errors instead of combined, split into two useStore calls with separate selectors.

[aihdene-genetec]

Why would FieldGroupState not have fieldMeta or errors? Is there a design decision behind that? This kind of breaks the idea of composition for me since now the field group depends on the form state.

[Zelys-DFKH]

The group does have its own store, but it's a derived one. The constructor calls createStore(() => ({ values: getBy(currFormStore.values, this.fieldsMap) })), projecting only values out of the parent form's store. fieldMeta stays in the parent exclusively.

That's intentional: field groups are a scoping convenience. getFormFieldName resolves local names to full form paths, and the group's store gives a values-only view of that slice. Validation state was left out because validators can be form-level (cross-field, async), so keeping fieldMeta in one place avoids duplication and sync bugs.

getFieldMeta(field) already exists on FieldGroupApi as an imperative getter, delegating to form.getFieldMeta(this.getFormFieldName(field)). There's prior art for scoped field meta access — it just isn't wired into the reactive store, which is why useStore(group.form.store, ...) is needed for rendering.

The ergonomics gap is real. The createStore projection could include a filtered fieldMeta slice alongside values, making errors reactive without reaching through to group.form.store. Worth a feature request.