Add option to set defaultvalues to undefined / null

[fendyk]

Currently its not possible to set certain defaultvalues to undefined if we use a validator like Valibot. In the example shown below, we have a schema where we have a complex object that has many properties and nested values

        const formSchema = v.object({
	        name: v.pipe(v.string(), v.minLength(3), v.maxLength(50)),
	        description: v.pipe(v.string(), v.minLength(3), v.maxLength(400)),
	        someComplexObject: SomeComplexObjectSchema,
        })
        
        type FormSchema = v.InferInput<typeof formSchema>;

	const form = useForm<FormSchema, ValibotValidator>({
		defaultValues: {
			name: "",
                         description: "",
                         someComplexObject: undefined // Not possible, we would have to set a initial value
		},
		onSubmit: async ({ value }) => {
		},
		validatorAdapter: valibotValidator(),
	});

Would be even nicer to only select the defaultValues you want, something like:

		defaultValues: { // Select properties you only want a default for
			name: "",
                         description: ""
		},

[crutchcorn]

What issues are you seeing when using undefined?

[fendyk]

I have to set all the defaultValue properties to the exact form schema:

	const form = useForm<FormSchema, ValibotValidator>({
		defaultValues: { // Cant do this, I am required to set description + someComplexObject
			name: "",
		},
		onSubmit: async ({ value }) => {
		},
		validatorAdapter: valibotValidator(),
	});

error:

Type '{ name: string; }' is missing the following properties from type '{ name: string; description: string; someComplexObject: { someField: string; someOtherField: number; someOtherField2: number; }; }': description, someComplexObject

[fendyk]

and with setting a property undefined i get error 'undefined is not assignable to type FormSchema`

[fendyk]

I created a stackblitz example to show the exact replication of the issue I am facing @crutchcorn

[OwenVey]

I'm running into this same issue today. I'd like to be able to initialize optional fields as undefined (or better yet not have to define them in defaultValues at all) like so:

  const form = useAppForm({
    defaultValues: {
      title: '',
      description: undefined,
    },
    validators: {
      onSubmit: z.object({ // Type 'string' is not assignable to type 'undefined'.ts(2322)
        title: z.string().nonempty('Required'),
        description: z.string().optional(),
      }),
    },
    onSubmit: async ({ value }) => console.log(value),
  });

but when doing so I get a Type 'string' is not assignable to type 'undefined' error in onSubmit().

I suppose this may just be a limitation of controlled inputs as mentioned in the React docs but maybe TanStack Form can find an elegant solution around this.

Otherwise, I'm left having to manually go through my form output object and check which fields are optional and set them to null/undefined and that becomes a mess with types.

[kunal-magure]

I have this zod schema
const orderConfirmationModalFormSchema = z .object({ variant: z.enum(['SAMPLE ORDER', 'GENERAL ORDER']), quantity: z.number({ required_error: 'Quantity is required' }), message: z.string({ required_error: 'Message is required' }), addOns: z.string().optional() }) .superRefine((data, ctx) => { if (data.variant === 'GENERAL ORDER' && !data.addOns) { ctx.addIssue({ code: z.ZodIssueCode.custom, message: 'Add-ons are required' }); } });

and this is the form
const form = useForm({ defaultValues: { variant: 'SAMPLE ORDER', quantity: 0, message: '', addOns: undefined }, validators: { onChange: orderConfirmationModalFormSchema } });

onChange gives error type string | undefined cannot be assigned to undefined.

[mfrancis107]

I think what people are looking for is a different input type and output type.
Here's an example schema.

const courseFormSchema = z.object({
  course: z.object({
    title: z.string().min(1, "Course title is required"),
    description: z.string().min(1, "Course description is required"),
    categoryId: z.string().min(1, "Category is required"),
    skillLevel: z.enum(["beginner", "intermediate", "advanced", "all"]),
    instructorId: z.string().min(1, "Instructor is required"),
    imageUrl: z.string().optional(),
    status: z.enum(["draft", "published"]).default("draft"),
  }),
  tags: z.array(z.string()).catch([]),
  prerequisites: z.array(z.string()).catch([]),
});

type CourseFormSchemaInput = z.input<typeof courseFormSchema>;
type CourseFormSchemaInput = {
    course: {
        title: string;
        description: string;
        categoryId: string;
        instructorId: string;
        skillLevel: "beginner" | "intermediate" | "advanced" | "all";
        status?: "draft" | "published" | undefined;
        imageUrl?: string | undefined;
    };
    prerequisites?: unknown;
    tags?: unknown;
}

type CourseFormSchemaOutput = z.output<typeof courseFormSchema>;
type CourseFormSchemaOutput = {
    course: {
        status: "draft" | "published";
        title: string;
        description: string;
        categoryId: string;
        skillLevel: "beginner" | "intermediate" | "advanced" | "all";
        instructorId: string;
        imageUrl?: string | undefined;
    };
    tags: string[];
    prerequisites: string[];
}

In my form i would then use the input type as my cast

const form = useAppForm({
    defaultValues: {
      course: {
        title: "",
        description: "",
        categoryId: "",
        skillLevel: "all",
        instructorId: "",
        imageUrl: undefined,
        status: undefined,
      },
      tags: [],
      prerequisites: [],
    } as CourseFormSchemaInput, // use input type here
    validators: {
      onSubmit: courseFormSchema,
    },
    onSubmit: async ({ value }) => {
      // Now the problem is I used the corrrect type for my default values. 
      // But now my value object here is the input type not the output type from zod
      
      const validatedValue = courseFormSchema.parse(value); 
      // This is what I have decided to do for now. Which is an extra unnecessary call but it fixes the types. 
      // I thought I could just do onSubmit: async ({ value } : {value CourseFormSchemaOutput ) => {
      // But that causes type errors above
      await createCourseMutation.mutateAsync(validatedValue, {
        onSuccess: (data) => {
          toast.success("Course created successfully");
          navigate({
            to: "/admin/courses/$courseId/content",
            params: { courseId: data.courseId },
          });
        },
        onError: () => {
          toast.error("Failed to create course");
        },
      });
    },
  });

[discoverlance-com]

This works for me by using the input type as a cast for the default values

[bbtools-ps]

Because the optional properties are interpreted as property?: string | undefined, the alternative to type casting is to conditionally add the optional properties. We can use the spread operator for this:

const Schema = z.object({
  name: z.string().trim().min(1, { message: "Name is required" }),
  notes: z.string().optional(),
});

form = useAppForm({
    defaultValues: {
      name: '',
      ...(user?.notes && { notes: user.notes }),
    }
    validators: { onSubmit: Schema },