How to setValue null to number input?

[narbek-abd]

import * as V from "valibot";
import { useForm } from "react-hook-form";
import { valibotResolver } from "@hookform/resolvers/valibot";

export const schema = V.object({
  numberRequired: V.number(),
});

export default function Page() {
  const f = useForm<V.InferOutput<typeof schema>>({
    resolver: valibotResolver(schema),
    defaultValues: {
      numberRequired: undefined,
    },
  });

  function howToSetValueEmpty() {
    f.setValue("numberRequired", undefined); // undefined is not allowed for setValue
    f.setValue("numberRequired", null); // Argument of type 'null' is not assignable to parameter of type 'number'
  }
}

if i make this filed V.nullable(), then it's no longer a required filed

[narbek-abd]

solution:

import * as V from "valibot";
import { useForm } from "react-hook-form";
import { valibotResolver } from "@hookform/resolvers/valibot";

// thanks to https://github.com/fabian-hiller/valibot/issues/1088
function initialNullable<TSchema extends V.GenericSchema>(schema: TSchema) {
  return V.pipe(V.nullable(schema), schema);
}

export const schema = V.object({
  numberRequired: initialNullable(V.pipe(V.number())),
});

export default function Page() {
  const f = useForm<V.InferInput<typeof schema>>({
    resolver: valibotResolver(schema),
    defaultValues: {
      numberRequired: null,
    },
  });

  function setNull() {
    f.setValue("numberRequired", null); 
  }

  function onSubmit(body) {
    const data = body as V.InferOutput<typeof schema>;
   }

}

[ninaad-padiyarr]

A small typing improvement to the solution above: use RHF's third generic for the validated output, so handleSubmit does not need a cast.

const schema = V.object({
  numberRequired: V.pipe(V.nullable(V.number()), V.number()),
});

const form = useForm<
  V.InferInput<typeof schema>,
  unknown,
  V.InferOutput<typeof schema>
>({
  resolver: valibotResolver(schema),
  defaultValues: { numberRequired: null },
});

form.setValue('numberRequired', null); // valid editing state
form.handleSubmit(data => {
  // numberRequired is number here; no assertion needed
  console.log(data.numberRequired);
});

The input accepts null, but the second V.number() rejects it during validation. A successful submit therefore contains a number. This addresses the form-state/type distinction; a controlled HTML input still needs its own empty-string/number conversion.

Resolver input/output generics

Prepared with AI assistance.