一覧へ戻る
MrBr/antd-zod（新しいタブで開きます）
主要言語: TypeScript
Antd Zod validation
- star 数
- 50
- watcher 数
- 2
- fork 数
- 7
- issue 数
- 3
- 最終更新
- 2025/11/28
gem-hunter主要言語: TypeScript
Antd Zod validation
The aim of this library is to enable seamless integration of Zod validation with Antd form fields.
npm install antd-zod
npm install antd-zod@7.0.0
npm install antd-zod@6.1.0
Link to npm package antd-zod.
import z from 'zod'; import { Form, Button, Input, InputNumber } from 'antd'; import { createSchemaFieldRule } from 'antd-zod'; // Create zod schema - base schema MUST be an object const CustomFormValidationSchema = z.object({ fieldString: z.string(), fieldNumber: z.number(), }); // Create universal rule for Form.Item rules prop for EVERY schema field const rule = createSchemaFieldRule(CustomFormValidationSchema); // Set rule to Form.Item const SimpleForm = () => { return ( <Form> <Form.Item label="String field" name="fieldString" rules={[rule]}> <Input/> </Form.Item> <Form.Item label="Number field" name="fieldNumber" rules={[rule]}> <InputNumber/> </Form.Item> <Button htmlType="submit">Submit</Button> </Form> ); };
All examples are in Storybook stories
To start storybook locally, install depenedencies and run npm run storybook.
Antd Form.Item (rc-field-form) has a certain validation lifecycle which works the best with Form.Item rules. In order to respect that behaviour, antd-zod provides a way to create a generic rule that will validate all schema properties and refinements on a field level.