Formily Ant Design Components

What this skill does

# Formily Ant Design Components

This skill provides comprehensive guidance for integrating Formily with Ant Design components. Focus on form layouts, field components, validation, and common patterns when using Formily with Ant Design in TypeScript.

## Installation

Install Formily Ant Design packages:

```bash
npm install @formily/antd @formily/core @formily/react
npm install antd
```

Install required types for TypeScript:

```bash
npm install -D @types/react @types/react-dom
```

## Basic Setup

Configure Formily with Ant Design:

```typescript
import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Form, FormItem, Input, Select, DatePicker } from '@formily/antd'

// Create schema field component
const SchemaField = createSchemaField({
  components: {
    Form,
    FormItem,
    Input,
    Select,
    DatePicker
  }
})

// Create form instance
const form = createForm()
```

## Form Layout Patterns

### Basic Form Layout

```typescript
import { Form } from '@formily/antd'

const BasicForm = () => {
  return (
    <Form form={form} labelCol={6} wrapperCol={16}>
      {/* Form fields */}
    </Form>
  )
}
```

### Grid Layout

```typescript
import { Form } from '@formily/antd'
import { Row, Col } from 'antd'

const GridLayout = () => {
  return (
    <Form form={form}>
      <Row gutter={16}>
        <Col span={12}>
          <SchemaField name="firstName">
            <FormItem label="First Name">
              <Input placeholder="Enter first name" />
            </FormItem>
          </SchemaField>
        </Col>
        <Col span={12}>
          <SchemaField name="lastName">
            <FormItem label="Last Name">
              <Input placeholder="Enter last name" />
            </FormItem>
          </SchemaField>
        </Col>
      </Row>
    </Form>
  )
}
```

### Tabs Layout

```typescript
import { Form } from '@formily/antd'
import { Tabs } from 'antd'

const { TabPane } = Tabs

const TabsLayout = () => {
  return (
    <Form form={form}>
      <Tabs defaultActiveKey="basic">
        <TabPane tab="Basic Info" key="basic">
          <SchemaField name="name">
            <FormItem label="Name">
              <Input />
            </FormItem>
          </SchemaField>
        </TabPane>
        <TabPane tab="Advanced" key="advanced">
          <SchemaField name="settings">
            <FormItem label="Settings">
              <Input />
            </FormItem>
          </SchemaField>
        </TabPane>
      </Tabs>
    </Form>
  )
}
```

## Common Ant Design Components

### Input Components

```typescript
// Text Input
<SchemaField name="username">
  <FormItem label="Username">
    <Input
      placeholder="Enter username"
      prefix={<UserOutlined />}
    />
  </FormItem>
</SchemaField>

// Password Input
<SchemaField name="password">
  <FormItem label="Password">
    <Input.Password
      placeholder="Enter password"
      visibilityToggle
    />
  </FormItem>
</SchemaField>

// Textarea
<SchemaField name="description">
  <FormItem label="Description">
    <Input.TextArea
      rows={4}
      placeholder="Enter description"
      showCount
      maxLength={500}
    />
  </FormItem>
</SchemaField>
```

### Select Components

```typescript
// Basic Select
<SchemaField name="country">
  <FormItem label="Country">
    <Select placeholder="Select country">
      <Select.Option value="us">United States</Select.Option>
      <Select.Option value="uk">United Kingdom</Select.Option>
      <Select.Option value="ca">Canada</Select.Option>
    </Select>
  </FormItem>
</SchemaField>

// Multi Select
<SchemaField name="skills">
  <FormItem label="Skills">
    <Select
      mode="multiple"
      placeholder="Select skills"
      options={[
        { label: 'JavaScript', value: 'js' },
        { label: 'TypeScript', value: 'ts' },
        { label: 'React', value: 'react' }
      ]}
    />
  </FormItem>
</SchemaField>

// Searchable Select
<SchemaField name="city">
  <FormItem label="City">
    <Select
      showSearch
      placeholder="Search city"
      filterOption={(input, option) =>
        option?.children.toLowerCase().includes(input.toLowerCase())
      }
    >
      <Select.Option value="nyc">New York</Select.Option>
      <Select.Option value="la">Los Angeles</Select.Option>
      <Select.Option value="chi">Chicago</Select.Option>
    </Select>
  </FormItem>
</SchemaField>
```

### Date and Time Components

```typescript
import { DatePicker, TimePicker, RangePicker } from '@formily/antd'

// Date Picker
<SchemaField name="birthDate">
  <FormItem label="Birth Date">
    <DatePicker
      style={{ width: '100%' }}
      format="YYYY-MM-DD"
    />
  </FormItem>
</SchemaField>

// Date Range Picker
<SchemaField name="dateRange">
  <FormItem label="Date Range">
    <RangePicker
      style={{ width: '100%' }}
      format="YYYY-MM-DD"
    />
  </FormItem>
</SchemaField>

// Time Picker
<SchemaField name="appointmentTime">
  <FormItem label="Appointment Time">
    <TimePicker
      style={{ width: '100%' }}
      format="HH:mm"
    />
  </FormItem>
</SchemaField>
```

### Checkbox and Radio Components

```typescript
// Single Checkbox
<SchemaField name="agreeToTerms">
  <FormItem>
    <Checkbox>
      I agree to the terms and conditions
    </Checkbox>
  </FormItem>
</SchemaField>

// Checkbox Group
<SchemaField name="interests">
  <FormItem label="Interests">
    <Checkbox.Group>
      <Checkbox value="sports">Sports</Checkbox>
      <Checkbox value="music">Music</Checkbox>
      <Checkbox value="travel">Travel</Checkbox>
    </Checkbox.Group>
  </FormItem>
</SchemaField>

// Radio Group
<SchemaField name="gender">
  <FormItem label="Gender">
    <Radio.Group>
      <Radio value="male">Male</Radio>
          <Radio value="female">Female</Radio>
          <Radio value="other">Other</Radio>
        </Radio.Group>
      </FormItem>
    </SchemaField>
```

### Number Input

```typescript
import { InputNumber } from '@formily/antd

<SchemaField name="age">
  <FormItem label="Age">
    <InputNumber
      style={{ width: '100%' }}
      min={0}
      max={120}
      placeholder="Enter age"
    />
  </FormItem>
</SchemaField>

<SchemaField name="price">
  <FormItem label="Price">
    <InputNumber
      style={{ width: '100%' }}
      min={0}
      precision={2}
      prefix="$"
      placeholder="0.00"
    />
  </FormItem>
</SchemaField>
```

### Switch and Slider

```typescript
import { Switch, Slider } from '@formily/antd

// Switch
<SchemaField name="notifications">
  <FormItem label="Email Notifications">
    <Switch />
  </FormItem>
</SchemaField>

// Slider
<SchemaField name="volume">
  <FormItem label="Volume">
    <Slider
      min={0}
      max={100}
      marks={{
        0: '0',
        50: '50',
        100: '100'
      }}
    />
  </FormItem>
</SchemaField>
```

## Form Validation with Ant Design

### Built-in Validation

```typescript
const form = createForm({
  schema: {
    type: 'object',
    properties: {
      email: {
        type: 'string',
        title: 'Email',
        'x-decorator': 'FormItem',
        'x-component': 'Input',
        'x-validator': [
          { required: true, message: 'Email is required' },
          { format: 'email', message: 'Invalid email format' }
        ]
      },
      password: {
        type: 'string',
        title: 'Password',
        'x-decorator': 'FormItem',
        'x-component': 'Input.Password',
        'x-validator': [
          { required: true, message: 'Password is required' },
          { min: 8, message: 'Password must be at least 8 characters' }
        ]
      }
    }
  }
})
```

### Custom Validation Messages

```typescript
const validationSchema = {
  username: {
    required: true,
    message: 'Username is required'
  },
  email: {
    type: 'email',
    message: 'Please enter a valid email address'
  },
  phone: {
    pattern: /^[0-9]{10}$/,
    message: 'Phone number must be 10 digits'
  }
}
`