Как указать значение по умолчанию (но не ноль) в числовом типе в форме zod и response-hooks?

Я использую zod и response-hooks-form для своей формы. У меня есть поле ввода цены. Чтобы предотвратить неконтролируемую ошибку ввода, нам нужно указать defaultValues, но это заставляет меня указывать 0 для значения цены по умолчанию. Я не хочу, чтобы оно было равно нулю. Могу ли я как-нибудь сделать его пустым?

import * as z from "zod";

export const ProductSchema = z.object({
  title: z.string().min(2),
  price: z.number().positive(),
  discount: z.number().int().min(0).max(100),
  ...
})

export type ProductType = z.infer<typeof ProductSchema>;

моя форма выглядит так:

const form = useForm<ProductType>({
    resolver: zodResolver(ProductSchema),
    defaultValues: {
      title: "",
      price: 0,
      discount: 0,
      ....
    },
  });

для стилизации я использовал компоненты формы shadcn:

<FormField
                  control = {control}
                  render = {({ field }) => (
                    <FormItem>
                      <FormLabel>Price</FormLabel>
                      <Input
                        {...field}
                        disabled = {isPending}
                        placeholder = "Price of product"
                        type = "number"
                        className = "shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm border-gray-300 rounded-md bg-white"
                      />
                      <FormMessage>{errors.price?.message}</FormMessage>
                    </FormItem>
                  )}
                  name = "price"
                />

Ваш price требует, чтобы это было положительное число. Какой HTML-код вы используете для отображения значения цены? Возможно, это должен быть response-hook-form.com/docs/usecontroller/controller

Xiduzo 18.06.2024 15:37

@Xiduzo Я отредактировал свой вопрос и добавил html. Это компоненты формы из shadcn.

Apollo Vostok 18.06.2024 15:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
138
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

в твоей схеме зода

price: z
    .string()
    .min(1, 'cannot be empty')
    .default('')
    .refine(     
      (val) => !isNaN(Number(val)),
      { message: 'Invalid price' }
    )

здесь он будет принимать только пустые строки и числа.

теперь вы можете установить значение по умолчанию как

 defaultValues: {
      title: "",
      price: "",
      discount: 0,
      ....
    },

Это сработало так, как я ожидал. Теперь мой вопрос: работает ли проверка, если пользователь не меняет цену (как «») и нажимает кнопку «Сохранить»? Как правило, я хочу сначала показать пустую строку, но принудительно указать положительное число при отправке данных на сервер.

Apollo Vostok 18.06.2024 15:52

можешь ли ты проверить сейчас

Dileepa Mabulage 18.06.2024 16:11

Другие вопросы по теме