useForm initial values with empty NumberInput

[pearl parrot]

I'm trying to use the useForm hook to manage my form state. If I provide initial values, I need to set the initial value of a NumberInput to 0. This renders a 0.

Ideally, however, I would like the input to start out blank instead of starting with a filled-in 0 value. Is this possible?

[covert fulcrum]

use null instead of a number for initial values and have a placeholder of 0 for the number input

[young oak]

You can use undefined as initial value

[pearl parrot]

Thanks. I'll play around with that a bit more. I ran into some TypeScript issues when declaring the type of the FormContext.

If I leave it undefined, won't I get React errors that an input component changed from uncontrolled to controlled?

[young oak]

No, it should not be the case with NumberInput

[pearl parrot]

When calling createFormContext<TypeName>(), is there a way to use different types for the initialValues compared to the generic type that is passed in?

I want to do

type TypeName = {
val1: number;
val2: string;
}

createForcreateFormContextcreateForcreateFormContextmContextmContext<TypeName>()

but call

const form = useForm({ initialValues: {val2: ""} });

I could make TypeName use number | undefined, but then my submit handler isn't typed correctly.

[young oak]

I could make TypeName use number | undefined, but then my submit handler isn't typed correctly.
Why it is not typed correctly?

[pearl parrot]

If I do

useFormContext<Partial<TypeName>()

Then the onSubmit handler will be typed as Partial<TypeName> and val1 would be number | undefined. However, after submitting, all of the values should be defined. I don't want the form onSubmit to be typed as a Partial<>.