formily-antd_skill

Overview

This skill documents how to integrate Formily with Ant Design components using TypeScript. It covers installation, schema-driven forms, layout patterns, common component usage, validation, and advanced patterns like dynamic sections and array fields. The content focuses on practical examples and code patterns to build robust Ant Design forms with Formily.

How this skill works

The skill explains how to create a Formily form instance, register Ant Design components via createSchemaField, and render schema-driven UIs inside Ant Design Form containers. It shows layout techniques (grid, tabs), common component wrappers (Input, Select, DatePicker, Switch, Slider), validation rules, and form actions such as submit and reset. Advanced patterns include dynamic fields via effects and array fields using ArrayCards.

When to use it

• You want schema-driven forms with Ant Design UI and Formily state/validation.
• You need consistent layout patterns: label/wrapper, grid columns, or tabbed sections.
• You require built-in and custom validation with friendly messages.
• You need dynamic form behavior (show/hide fields, conditional sections).
• You must support repeatable groups or arrays of entries (contacts, items).

Best practices

• Register only the Ant Design components you use in createSchemaField to keep bundle size small.
• Keep validation rules in the schema to separate concerns and enable reuse.
• Use FormProvider and a single form instance when multiple components share state.
• Prefer schema-driven patterns for repetitive fields and ArrayCards for lists.
• Use layout components (Row/Col, Tabs) from Ant Design to control responsive behavior.

Example use cases

• A user registration form with inputs, password, and email validation implemented in the schema.
• An admin settings page with tabs for basic and advanced options using SchemaField inside Tabs.
• A profile editor using DatePicker for birth date and Select for timezone with showSearch enabled.
• A dynamic resume form that shows experience details only when the user checks a flag.
• An emergency contacts section implemented as an array with add/remove via ArrayCards.