How to make a form.Field understand that it is now part of a FormGroup?

[gregorbg]

I am playing around with the new FormGroup feature as per https://tanstack.com/form/latest/docs/framework/react/guides/form-groups. In my wizard, I want to have a "Next Step" button which is only enabled if the form is valid (so true by default when entering the wizard, but disabling as soon as you make some invalid/ incorrect input)

Say I have a snippet similar to the example code:

const form = useForm({
    defaultValues: {
        step1: {
            name: ""
        },
        step2: {
            age: 0
        }
    }
})

return (
    <form.FormGroup
        name="step1"
        children={group => (
            <>
              <form.Field
                name="name"
                validators={{
                  onChange: ({ value }) => someCustomValidationLogic(value),
                }}
                children={(field) => (
                  <input
                    value={field.state.value}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                )}
              />
              <button disabled={!group.state.meta.isFieldsValid}>Next</button>
            </>
        )}
    />
)

How do I make my step1.name field "understand" that it is now part of the outer FormGroup, so that group.state.meta.isFieldsValid gets passed to the button correctly? It seems that despite the documentation says...

children={group => (
  // `group` here has all of the form-like methods you'd expect like `deleteField` or `insertFieldValue`
  // ...
)}

...there is actually no group.Field that I can use to explicitly add a field as "you are part of this group now".

Do I have to hoist up all of my validation logic into the FormGroups onChange validation return object, when the custom logic was previously living inside all of the (many, many) nested fields? I have found that sub-fields are magically able to detect that they have an error when you return the correct key under a FormGroups onChange return value's fields key, but epecially with dynamic wizards (where the order of the steps might be up to user configuration) I am not sure whether squeezing all validation logic into the FormGroup that was previously residing separately in the individual form.Fields is desirable or even possible.

Any kind of advice would be appreciated! Thank you in advance :)

[apoorva-01]

You don't need a group.Field, and you don't need to hoist your validators up. The linkage happens purely by name prefix, so the fix is the field name.

Your field is name="name", which registers a field at the form root called name. But your data lives at step1.name, and the group is scoped to step1. So that field isn't actually inside the group as far as the form is concerned, which is why group.state.meta.isFieldsValid never reacts to it. Render it with the full path from the form root:

<form.Field
  name="step1.name"
  validators={{
    onChange: ({ value }) => someCustomValidationLogic(value),
  }}
  children={(field) => (
    <input
      value={field.state.value}
      onChange={(e) => field.handleChange(e.target.value)}
    />
  )}
/>

Once the name is step1.name, the group picks it up automatically. group.state.meta.isFieldsValid is defined as "true when the field-level validators have no errors" for the fields under that group's prefix, so your per-field onChange logic stays exactly where it is now. No need to move it into the group's onChange.

Keep the group-level validators for things that are genuinely about the group as a whole (cross-field checks, or a shared schema you compose with the parent). Your individual field validation can keep living on the fields.

For the dynamic-wizard case, this scales fine since each step is just its own group name and the fields under it carry their own validators. The order you render the steps in doesn't change any of that.