Determine validation rules when rendering fields

[sazzer]

Is it possible to determine the validation rules for a given field from within the field component? I want to do this to be able to provide the correct HTML attributes without excessive repetition.

For example, given this form:

  const formValidation = v.object({
    current: v.pipe(v.string(), v.minLength(1)),
    new: v.pipe(v.string(), v.minLength(1)),
    confirm: v.pipe(v.string(), v.minLength(1))
  });
  const form = useAppForm({
    formId: "profile/security/password",
    defaultValues: {
      current: "",
      new: "",
      confirm: ""
    },
    validators: {
      onMount: formValidation,
      onChange: formValidation
    },
    async onSubmit({ value }) {
        // .....
    }
  });

And this field component:

export const TextField: React.FC<TextFieldProps> = (props) => {
  const field = useFieldContext<string>();

  return (
    <>
      <label className="dui-label">
        {props.label}
      </label>
      <input
        type={props.type ?? "text"}
        name={field.name}
        className="dui-input w-full"
        value={field.state.value}
        onChange={(e) => field.handleChange(e.target.value)}
        onBlur={() => field.handleBlur()}
      />
    </>
  );
};

I want to be able to provide the required, maxLength, etc attributes to the <input> element, but without needing to pass them to the component rendering as well as when constructing the validator. Instead I'd like to have some way to infer these from the form itself - from either useFieldContext or useFormContext.

Is there any way to achieve this?

Cheers