How can validators have access to props using withForm ?

[amarant]

Using withForm for a sub form, I need my validators schema to have access to the props of the component, for example if I want to test if a name is unique in a group, where group is given as a prop, so it would like to have access to a props property of all validators :

const ChildForm = withForm({
  defaultValues: {
    name: '',
  },
  props: {
    group: '',
  },
validators: {
    onBlurAsync: ({props, value}) => getNameInGroupSchema(props.group).safeParseAsync(value)  // <-- we need to have access to the group to generate a schema
},
  render: function Render({ form, group }) {
    return (
      <div>
        <p>{group}</p>
        <form.AppField
          name="name"
          children={(field) => <field.TextField label="Name" />}
        />
        <form.AppForm>
          <form.SubscribeButton label="Submit" />
        </form.AppForm>
      </div>
    )
  },
})

[juanvilladev]

In general this wouldn't work because at runtime, the form object you pass from the parent will be used overriding the local validators you defined above. So either way if you COULD pass props into the validator function, this wouldn't actually ever execute.

You should actually be getting a type error when trying to pass the form object to the ChildForm since the validators don't align either.

[amarant]

so the solution is to not use validators in the sub form ?

[juanvilladev]

@amarant can you add your thoughts to #1273 it's related to this issue in general. We can likely close this out and include details there so it's clear.

[ljukas]

@amarant You can put the validators on the fields in the subform and they should still work if Im not incorrect.

<form.Appfield validators={{ ... }} />