Я использую 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"
/>
@Xiduzo Я отредактировал свой вопрос и добавил html. Это компоненты формы из shadcn.
в твоей схеме зода
price: z
.string()
.min(1, 'cannot be empty')
.default('')
.refine(
(val) => !isNaN(Number(val)),
{ message: 'Invalid price' }
)
здесь он будет принимать только пустые строки и числа.
теперь вы можете установить значение по умолчанию как
defaultValues: {
title: "",
price: "",
discount: 0,
....
},
Это сработало так, как я ожидал. Теперь мой вопрос: работает ли проверка, если пользователь не меняет цену (как «») и нажимает кнопку «Сохранить»? Как правило, я хочу сначала показать пустую строку, но принудительно указать положительное число при отправке данных на сервер.
можешь ли ты проверить сейчас
Ваш
price
требует, чтобы это было положительное число. Какой HTML-код вы используете для отображения значения цены? Возможно, это должен быть response-hook-form.com/docs/usecontroller/controller