You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
constform=useForm({defaultValues: {step1: {name: ""},step2: {age: 0}}})return(<form.FormGroupname="step1"children={group=>(<><form.Fieldname="name"validators={{onChange: ({ value })=>someCustomValidationLogic(value),}}children={(field)=>(<inputvalue={field.state.value}onChange={(e)=>field.handleChange(e.target.value)}/>)}/><buttondisabled={!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 :)
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
I am playing around with the new
FormGroupfeature 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 (sotrueby 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:
How do I make my
step1.namefield "understand" that it is now part of the outerFormGroup, so thatgroup.state.meta.isFieldsValidgets passed to the button correctly? It seems that despite the documentation says......there is actually no
group.Fieldthat 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
FormGroupsonChangevalidation 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 aFormGroupsonChangereturn value'sfieldskey, 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 theFormGroupthat was previously residing separately in the individualform.Fieldsis desirable or even possible.Any kind of advice would be appreciated! Thank you in advance :)
Beta Was this translation helpful? Give feedback.
All reactions