fair-rose

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

rare-sapphire•2mo ago

can the user change the partId? or is it static data coming in from somewhere?

fair-roseOP•2mo 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.

rare-sapphire•5w 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?

fair-roseOP•5w ago

My code needs it for some queries and filtering 🤓

rare-sapphire•5w 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

fair-roseOP•5w 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

rare-sapphire•5w 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?

fair-roseOP•5w 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);
              }}
            />
          )}
        />

Gaming

Programming

Exclude field from onSubmit and validators

Did you find this page helpful?