How can I allow null form values but non-null submission values? (Typescript, MUI, Controller, Autocomplete)

[tomashaddad]

Hi,

Firstly, thank you a lot for this package!

I've searched around a bit for this but I'm still not sure how to do it properly. Take this example with two codependent MUI Autocomplete components:

https://codesandbox.io/s/elastic-sanne-2cck6p?file=/src/App.tsx

Autocomplete takes a value of null to display no item. This is the default behaviour I want since this data will come from a server. Submission of this form is not possible without both fields, but the submit function expects the type of the submission to match the type of the form.

So if form submission is successful, how can I write a submit function that knows the given values aren't null?

Thank you!

[leapful]

@tomashaddad

Could you please explain more details what problem you got with the codesandbox url ?

[tomashaddad]

@tomashaddad

Could you please explain more details what problem you got with the codesandbox url ?

handleSubmit expects onValid: SubmitHandler<FormData> as a first argument, where FormData's properties have type string | null. I need the null type to set the value of Autocomplete to no input. Since I've marked both Autocomplete components as required, they can't be null on submission, but nevertheless I need to do null checks in the submit function. What is the best way to get around this?

[leapful]

@tomashaddad You can use "onError" callback of method handleSubmit. More details please refers to #9091

[tomashaddad]

Sorry, I feel like I'm missing something ... It's not that I want a way to handle form values on error, it's that both of those callbacks (onValid and onError) have arguments of type FormData, so even if the form is valid (i.e., the values are not null), the onValid function still forces me to check for null values. Is there a way for me to not have to check for null values when a valid form is submitted?

[leapful]

@tomashaddad

You're using typescript config with strict: true that's why rule strictNullChecks is enabled by default and forces null checks on every data that might be null , which is your type definition of FormData.

You can remove null type in your FormData or disable rule strictNullChecks.

Reference: https://www.typescriptlang.org/tsconfig#strictNullChecks

[tomashaddad]

Like I said, I can't remove the null type from FormData since setting the value of Autocomplete to null is what allows it to display no value. Also, I think turning off strict null checks goes against the point of TS.

In this instance, I think I will just use the bang operator in the onValid callback since I know it can't be null.

Thanks for your help. Sorry if I wasted your time on this.

[mp3por]

Hello, I have the same problem.

Here is a simple code to demonstrate it.

interface FormValues {
    name: string | null; // must use null, since undefined is not allowed by react hook form
}

const form = useForm<FormValues>({
    defaultValues: {
        name: null,
    },
}); 

const onSubmit: SubmitHandler<FormValues> = (data) => data.name; // here data.name is string, not string | null, yet TS does not know that

<form onSubmit={handleSubmit(onSubmit)}>
    <input {...register("name", { required: true })} />
    {errors.name && <span>This field is required</span>}
    <input type="submit" />
</form>

[MartynasSapoka]

@mp3por There are 2 ways you can do this:

1. Remove null from the type and initialize it to empty string. Then you rely on the validation logic to make sure that the input is valid
2. Initialize the form with a null value but type cast it to string:

defaultValues: {
  name: null as unknown as string,
},

[raegen]

Late to the party I guess but for what it's worth, useForm nowadays supports passing a TTransformedValues generic:

useForm<{
    name: string | null;
}, any, {
    name: string;
}>

[elmehdielhamdi]

Hello @tomashaddad , did you find a good solution for this case?
Thank you!

[BrendanC23]

The easiest way is to use Zod input and output schemas. As this comment mentions, useForm supports TFieldValues and TTransformedValues generics, which are handled by the Zod schema.

const schema = z.object({
    value: z.string().nullable().pipe(z.string()),
});

type SchemaInput = z.input<typeof schema>; // { value: string | null }
type SchemaOutput = z.output<typeof schema>; // { value: string }

const form = useForm({
    resolver: zodResolver(schema),
});

[clemwo]

to add to @BrendanC23 answer, here is a small utility function to add a nullable input but keep the required output:

import type { ZodType } from 'zod';
import { z } from 'zod';

/**
 * Returns a Zod schema that allows null input
 * but doesn't add null to the output
 * To be used for react hook form
 */
export const getZodNullInputRequiredOutput = <TOutput, TInput>(
  schema: ZodType<TOutput, TInput> & ZodType<TOutput, TOutput | null>,
) => {
  return schema.nullable().pipe(schema);
};

const schema = z.object({
  value: getZodNullInputRequiredOutput(z.string()),
});

type InputSchema = z.input<typeof schema>; // { value: string | null; }
type OutputSchema = z.output<typeof schema>; // { value: string; }

[yudin-s]

The clean type-level answer is to separate the form's input type from its submit/output type.

React Hook Form supports this with the third generic, TTransformedValues:

type FormInput = {
  name: string | null
}

type FormOutput = {
  name: string
}

const form = useForm<FormInput, unknown, FormOutput>({
  defaultValues: { name: null },
  resolver,
})

const onSubmit: SubmitHandler<FormOutput> = (data) => {
  data.name // string
}

If you are using Zod, make the schema accept nullable input but output non-null:

const schema = z.object({
  name: z.string().nullable().pipe(z.string().min(1)),
})

type FormInput = z.input<typeof schema>   // string | null
type FormOutput = z.output<typeof schema> // string

const form = useForm<FormInput, unknown, FormOutput>({
  resolver: zodResolver(schema),
  defaultValues: { name: null },
})

That matches the UI reality: MUI Autocomplete needs null while the field is empty, but a successful submit should be typed as the validated/transformed output.