T
TanStack•2w ago
harsh-harlequin

Exclude field from onSubmit and validators

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: 
ts 
  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);
    },
  });
ts 
  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
8 Replies
equal-aqua
equal-aqua•2w ago
can the user change the partId? or is it static data coming in from somewhere?
harsh-harlequin
harsh-harlequinOP•2w ago
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.
equal-aqua
equal-aqua•2w ago
Okay, so partId and partReferenceId are both changeable by the user, but you don't need the partId in any Dtos or the like. What is the partId used for, then? A lookup for visual display?
harsh-harlequin
harsh-harlequinOP•2w ago
My code needs it for some queries and filtering đŸ¤“
equal-aqua
equal-aqua•2w ago
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
harsh-harlequin
harsh-harlequinOP•2w ago
Yess Ohhh okay, no worries 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
equal-aqua
equal-aqua•2w ago
@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?
harsh-harlequin
harsh-harlequinOP•2w ago
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);
    },
  });
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);
    },
  });
My field, where I set both values whenever partReferenceId changes. The picker supplies both values 
        <form.AppField
          name="partReferenceId"
          children={(field) => (
            <field.PartPicker
              onSelect={(params) => {
                form.setFieldValue("partReferenceId", params?.partReferenceId ?? null);
                form.setFieldValue("partId", params?.partId ?? null);
              }}
            />
          )}
        />
        <form.AppField
          name="partReferenceId"
          children={(field) => (
            <field.PartPicker
              onSelect={(params) => {
                form.setFieldValue("partReferenceId", params?.partReferenceId ?? null);
                form.setFieldValue("partId", params?.partId ?? null);
              }}
            />
          )}
        />

Did you find this page helpful?