我正在使用react-hook-form、zod和Shadcn/ui表单和字段构建一个表单。在其中一个表单字段中，我希望确保输入的值是以美元为单位的价格。我设置的方式是，当我将该字段的默认值设置为“"时，会出现一个打字错误，因为我将输入的值强制转换为一个数字。有没有什么方法可以修复这个错误，而不破坏我的验证或使用一个丑陋的数字类型的输入，必须默认为“0”？

const FormSchema = z.object({
  title: z.string().min(10, {
    message: "Item title must be at least 10 characters.",
  }),
  freeShipping: z.boolean(),
  shippingPrice: z.coerce
    .number({
      required_error: "Please enter a shipping price.",
      invalid_type_error:
        "Shipping price must contain only numbers and decimals.",
    })
    .min(1, "Minimum shipping price is $1.")
    .max(1000, "Maximum buy now price is $1,000.")
    .multipleOf(0.01, {
      message: "Buy now price must have no more than 2 decimal places.",
    }),
});

export default function ShippingStep({
  updateListing,
}: {
  updateListing: Function;
}) {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      title: "",
      shippingPrice: "", // getting typescript error here (Type 'string' is not assignable to type 'number'.)
      freeShipping: false,
    },
  });

  // On form submit
  const onSubmit = async (values: z.infer<typeof FormSchema>) => {
    //
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Payment & Shipping</CardTitle>
        <CardDescription>
          Configure payment and shipping options.
        </CardDescription>
      </CardHeader>
      <CardContent>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Item Title</FormLabel>
                  <FormControl>
                    <Input placeholder="Title" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="freeShipping"
              render={({ field }) => (
                <FormItem className="flex items-center space-x-2">
                  <Label htmlFor="airplane-mode">Free Shipping</Label>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {!form.getValues("freeShipping") && (
              <FormField
                control={form.control}
                name="shippingPrice"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Shipping Charge</FormLabel>
                    <FormControl>
                      <Input
                        className="w-full max-w-xs"
                        placeholder="Shipping charge"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            )}

            <Button>Save</Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
}

编辑-这是我的输入.tsx代码。这只是Shadcn/ui CLI中的默认值：

import * as React from "react"

import { cn } from "@/lib/utils"

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input }