#Exclude field from onSubmit and validators

13 messages · Page 1 of 1 (latest)

viscid tendon
#

Can I have a form field defined in defaultValues and use it in my code, but exclude it from the form onSubmit callback and exclude it from the validators? e.g:

  const form = useAppForm({
    defaultValues: {
      quantity: defaultDeliveryNoteLineFormData.quantity as number | null,
      deliveryNoteId: deliveryNoteId,
      partId: defaultDeliveryNoteLineFormData.partId as number | null,
      partReferenceId: defaultDeliveryNoteLineFormData.partReferenceId as number | null,
      sellOrderLineId: defaultDeliveryNoteLineFormData.sellOrderLineId as number | null,
    },
    validators: {
      onSubmit: createDeliveryNoteLineSchema,
    },
    onSubmit: async ({ value: deliveryNoteFormData }) => {
      const mutationResult = await createDeliveryNoteLineMutation({
        variables: { deliveryNoteLine: deliveryNoteFormData as CreateDeliveryNoteLine },
      });
      onSubmit?.(mutationResult);
    },
  });

I don't want partId to be part of value: deliveryNoteFormData variable and exclude it in the validators property too

wild geode
#

or is it static data coming in from somewhere?

viscid tendon
# wild geode can the user change the partId?

Hmmmm indirectly yes, I want to have a "picker" combobox field which sets both partId and partReferenceId (they are meaningful I swear 😅). I want to validate and submit partReferenceId only.

wild geode
viscid tendon
wild geode
#

hmmm ... so I assume when you said
"... and exclude it in the validators property too"

you want it to be hidden from, say, a zod schema?

#

There isn't a feature to remove fields like this from validation / submission yet, so I was trying to assess when / how the partId is needed

viscid tendon
#

I am currently adding @ts-ignore to avoid lint errors and unpacking the onSubmit value to discard the field, but this is a bad solution

wild geode
#

@ts-expect-error is better, but that aside, do you have an example of the field values and the zod schema that are type complaining?

viscid tendon
# wild geode `@ts-expect-error` is better, but that aside, do you have an example of the fiel...

I have but it is not minimal 😅

export const quantitySchema = z
  .number({ invalid_type_error: "Introduce un número entero positivo" })
  .int("La cantidad debe ser un número entero")
  .positive("La cantidad debe ser un número positivo");
export const requiredIdSchema = z.number({ invalid_type_error: "Campo obligatorio" }).int().positive();
export const nullableIdSchema = z.number().int().positive().nullable();

export const createDeliveryNoteLineSchema = z.object({
  quantity: quantitySchema.nullable(),
  deliveryNoteId: requiredIdSchema,
  partReferenceId: requiredIdSchema,
  sellOrderLineId: nullableIdSchema,
});

const defaultDeliveryNoteLineFormData = {
  quantity: null,
  partId: null,
  partReferenceId: null,
  sellOrderLineId: null,
};

  const form = useAppForm({
    defaultValues: {
      quantity: defaultDeliveryNoteLineFormData.quantity as number | null,
      deliveryNoteId: deliveryNoteId,
      partId: defaultDeliveryNoteLineFormData.partId as number | null,
      partReferenceId: defaultDeliveryNoteLineFormData.partReferenceId as number | null,
      sellOrderLineId: defaultDeliveryNoteLineFormData.sellOrderLineId as number | null,
    },
    validators: {
      // @ts-ignore partId is part of the form but not in the schema
      onSubmit: createDeliveryNoteLineSchema,
    },
    onSubmit: async ({ value: deliveryNoteFormData }) => {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const { partId, ...rest } = deliveryNoteFormData;
      const mutationResult = await createDeliveryNoteLineMutation({
        variables: { deliveryNoteLine: rest as CreateDeliveryNoteLine },
      });
      onSubmit?.(mutationResult);
    },
  });