T
TanStack•2mo ago
sensitive-blue

Change value of a field based on another field

I have form with some questions. I am making the field disabled if checkbox isnt checked. I want to make this possible via tanstack-form but couldnt manage to do it except useEffect. Any suggestions?
No description
No description
3 Replies
sensitive-blue
sensitive-blueOP•2mo ago
I also want to add, there is a property canSubmit in form.state. Using tanstack-form, this cansubmit property is always false but using useffect, it nay be true if there is no validation error
No description
unwilling-turquoise
unwilling-turquoise•2mo ago
If it's dependent on another field, you have multiple options: 1. Access the value inside the checkbox 
<form.AppField name="tramer" listeners={{/* ... */}}>
  {tramerField => <>
    <tramerField.Checkbox />
    {tramerField.state.value && (
      <form.AppField name="tramerTutari">
        {field => <field.TextField disabled={!tramerField.state.value}/>}
      </form.AppField>
    )}
  </>}
</form.AppField>
<form.AppField name="tramer" listeners={{/* ... */}}>
  {tramerField => <>
    <tramerField.Checkbox />
    {tramerField.state.value && (
      <form.AppField name="tramerTutari">
        {field => <field.TextField disabled={!tramerField.state.value}/>}
      </form.AppField>
    )}
  </>}
</form.AppField>
2. Use Subscribe to check the up to date value 
<form.Subscribe selector={state => state.values.tramer}>
  {tramer => (
    <form.AppField name="tramerTutari">
      {field => <field.TextField disabled={!tramer}/>}
    </form.AppField>
  )}
</form.Subscribe>
<form.Subscribe selector={state => state.values.tramer}>
  {tramer => (
    <form.AppField name="tramerTutari">
      {field => <field.TextField disabled={!tramer}/>}
    </form.AppField>
  )}
</form.Subscribe>
3. Use useStore for a reactive value without the need for useEffect 
// will rerender component everytime the value changes
const tramer = useStore(form.store, state => state.values.tramer)

<form.AppField name="tramerTutari">
  {field => <field.TextField disabled={!tramer} />}
</form.AppField>
// will rerender component everytime the value changes
const tramer = useStore(form.store, state => state.values.tramer)

<form.AppField name="tramerTutari">
  {field => <field.TextField disabled={!tramer} />}
</form.AppField>
sensitive-blue
sensitive-blueOP•2mo ago
thanks a lot for the answer

Did you find this page helpful?