### Develop rc-field-form Locally

Source: https://github.com/react-component/field-form/blob/master/README.md

Instructions to set up the development environment for rc-field-form. This involves installing dependencies, starting a local development server, and accessing the application via a provided URL.

```bash
npm install
npm start
open http://localhost:8000
```

--------------------------------

### Basic Form Setup with Validation in React

Source: https://context7.com/react-component/field-form/llms.txt

Demonstrates a simple login form using `rc-field-form`. It includes input fields for username and password, applying required and minimum length validation rules. The `onFinish` and `onFinishFailed` handlers are provided for success and failure scenarios respectively.

```typescript
import Form, { Field } from 'rc-field-form';

// Simple form with validation
const LoginForm = () => {
  return (
    <Form
      onFinish={(values) => {
        console.log('Form submitted:', values);
        // values = { username: 'john', password: 'secret123' }
      }}
      onFinishFailed={(errorInfo) => {
        console.log('Validation failed:', errorInfo.errorFields);
        // errorInfo = { values, errorFields: [{ name: ['username'], errors: ['Username is required'] }], outOfDate: false }
      }}
    >
      <Field name="username" rules={[{ required: true, message: 'Username is required' }]}>
        <input placeholder="Username" />
      </Field>

      <Field
        name="password"
        rules={[
          { required: true },
          { min: 6, message: 'Password must be at least 6 characters' }
        ]}
      >
        <input type="password" placeholder="Password" />
      </Field>

      <button type="submit">Login</button>
    </Form>
  );
};

```

--------------------------------

### Basic Form Usage in React

Source: https://github.com/react-component/field-form/blob/master/README.md

A fundamental example demonstrating how to use the `Form` and `Field` components from `rc-field-form` to create a simple login form. It includes input fields for username and password and a submit button, with an `onFinish` handler to log form values.

```javascript
import Form, { Field } from 'rc-field-form';

const Input = ({ value = '', ...props }) => <input value={value} {...props} />;

const Demo = () => {
  return (
    <Form
      onFinish={values => {
        console.log('Finish:', values);
      }}
    >
      <Field name="username">
        <Input placeholder="Username" />
      </Field>
      <Field name="password">
        <Input placeholder="Password" />
      </Field>

      <button>Submit</button>
    </Form>
  );
};

export default Demo;
```

--------------------------------

### Handling Form Submission with Ref in React

Source: https://github.com/react-component/field-form/blob/master/README.md

Illustrates how to manage focus on an input field after form submission using a ref in React. This example shows a basic form structure with a Field component and an input element attached to a ref.

```jsx
<Form>
  <Field name="username">
    <input ref={this.inputRef} />
  </Field>
</Form>
```

--------------------------------

### FormProvider for Multiple Forms and Validation in React

Source: https://context7.com/react-component/field-form/llms.txt

This example demonstrates the use of `FormProvider` in rc-field-form to manage multiple independent forms within a single application. It shows how to configure global validation messages, listen for form changes, and access values from different forms during submission, facilitating complex user interfaces and workflows.

```typescript
import Form, { Field, FormProvider } from 'rc-field-form';
import React, { useState } from 'react';

const MultiFormsApp = () => {
  const [form1] = Form.useForm();
  const [form2] = Form.useForm();

  return (
    <FormProvider
      validateMessages={{
        required: '${label} is required!',
        types: {
          email: '${label} is not a valid email!',
          number: '${label} is not a valid number!',
        },
        number: {
          range: '${label} must be between ${min} and ${max}',
        },
      }}
      onFormChange={(name, info) => {
        console.log('Form changed:', name, info.changedFields);
        // name = 'loginForm' or 'registerForm'
        // info = { changedFields: [...], forms: { loginForm: FormInstance, registerForm: FormInstance } }
      }}
      onFormFinish={(name, info) => {
        console.log('Form finished:', name, info.values);

        if (name === 'loginForm') {
          // Access other form
          const registerValues = info.forms.registerForm.getFieldsValue();
          console.log('Register form values:', registerValues);
        }
      }}
    >
      <div style={{ display: 'flex', gap: 32 }}>
        <div>
          <h3>Login Form</h3>
          <Form name="loginForm" form={form1}>
            <Field name="email" rules={[{ required: true, type: 'email' }]}>
              <input placeholder="Email" />
            </Field>
            <Field name="password" rules={[{ required: true }]}>
              <input type="password" placeholder="Password" />
            </Field>
            <button type="submit">Login</button>
          </Form>
        </div>

        <div>
          <h3>Register Form</h3>
          <Form name="registerForm" form={form2}>
            <Field name="username" rules={[{ required: true }]}>
              <input placeholder="Username" />
            </Field>
            <Field name="email" rules={[{ required: true, type: 'email' }]}>
              <input placeholder="Email" />
            </Field>
            <Field name="age" rules={[{ type: 'number', min: 18, max: 120 }]}>
              <input type="number" placeholder="Age" />
            </Field>
            <button type="submit">Register</button>
          </Form>
        </div>
      </div>
    </FormProvider>
  );
};

```

--------------------------------

### Programmatic Form Control with useForm Hook in React

Source: https://context7.com/react-component/field-form/llms.txt

Illustrates advanced form management using the `useForm` hook from `rc-field-form`. This example shows how to programmatically set form values, validate specific fields, and retrieve form values and errors. It's useful for scenarios requiring external control over form state.

```typescript
import Form, { Field } from 'rc-field-form';
import type { FormInstance } from 'rc-field-form';

const AdvancedForm = () => {
  const [form] = Form.useForm();

  const handleFillForm = () => {
    form.setFieldsValue({
      username: 'admin',
      email: 'admin@example.com'
    });
  };

  const handleValidateField = async () => {
    try {
      await form.validateFields(['email']);
      console.log('Email is valid');
    } catch (errorInfo) {
      console.log('Validation errors:', errorInfo);
    }
  };

  const handleGetValues = () => {
    const allValues = form.getFieldsValue();
    console.log('All values:', allValues);

    const username = form.getFieldValue('username');
    console.log('Username:', username);

    const errors = form.getFieldError('email');
    console.log('Email errors:', errors); // string[]
  };

  return (
    <>
      <Form form={form} onFinish={(values) => console.log(values)}>
        <Field name="username" rules={[{ required: true }]}>
          <input />
        </Field>
        <Field name="email" rules={[{ type: 'email', required: true }]}>
          <input />
        </Field>
        <button type="submit">Submit</button>
      </Form>

      <button onClick={handleFillForm}>Fill Form</button>
      <button onClick={handleValidateField}>Validate Email</button>
      <button onClick={handleGetValues}>Get Values</button>
    </>
  );
};

```

--------------------------------

### Form Component API

Source: https://github.com/react-component/field-form/blob/master/README.md

Documentation for the `Form` component, detailing its available props for managing form state, handling user input, and controlling validation.

```APIDOC
## Form Component API

This section details the props available for the `Form` component in `rc-field-form`.

### Description

The `Form` component is the main wrapper for managing form state, handling submissions, and validating fields. It accepts various props to customize its behavior and appearance.

### Method

Not Applicable (Component API)

### Endpoint

Not Applicable (Component API)

### Parameters

#### Props

- **component** (string | Component | false) - Customize the render component for the Form. Defaults to 'form'.
- **fields** ([FieldData](#fielddata)[]) - Control the status of Form fields. Primarily used when integrating with Redux.
- **form** ([FormInstance](#useform)) - Set the form instance created by `useForm`. Defaults to `Form.useForm()`.
- **initialValues** (Object) - Set the initial values for the Form fields.
- **name** (string) - Configure a name for the Form when used with [FormProvider](#formprovider).
- **preserve** (boolean) - Determines whether to preserve field values when a field is removed from the form. Defaults to `false`.
- **validateMessages** ([ValidateMessages](#validatemessages)) - Set custom validation message templates.
- **onFieldsChange** ((changedFields, allFields) => void) - Callback function triggered when any field's value changes. It receives the changed fields and all current fields as arguments.
- **onFinish** ((values) => void) - Callback function triggered when the form is successfully submitted and all validations pass. It receives the form values.
- **onFinishFailed** (({ values, errorFields, outOfDate }) => void) - Callback function triggered when the form submission fails due to validation errors or other issues. It receives an object containing values, error fields, and out-of-date status.
- **onValuesChange** ((changedValues, values) => void) - Callback function triggered when any field's value changes. It receives the changed values and the complete form values.

### Request Example

```jsx
import Form, { Field } from 'rc-field-form';

const Input = ({ value = '', ...props }) => <input value={value} {...props} />;

const MyForm = () => {
  return (
    <Form
      initialValues={{ username: 'testuser' }}
      onFinish={values => console.log('Form submitted:', values)}
      onFieldsChange={(changedFields, allFields) => {
        console.log('Field changed:', changedFields, 'All fields:', allFields);
      }}
    >
      <Field name="username">
        <Input placeholder="Username" />
      </Field>
      <Field name="password">
        <Input type="password" placeholder="Password" />
      </Field>
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;
```

### Response

#### Success Response (Form Submission)

- **values** (Object) - The current values of all form fields upon successful submission.

#### Error Response (Form Submission Failure)

- **values** (Object) - The form field values at the time of submission failure.
- **errorFields** (Array) - An array of objects, where each object represents a field with validation errors. Contains `name`, `errors`, and `touched` properties.
- **outOfDate** (boolean) - Indicates if the submission was out of date, potentially due to rapid state changes.

#### Response Example (onFinish)

```json
{
  "username": "john_doe",
  "password": "securepassword123"
}
```

#### Response Example (onFinishFailed)

```json
{
  "values": {
    "username": "",
    "password": "pass"
  },
  "errorFields": [
    {
      "name": "username",
      "errors": ["Username is required."],
      "touched": true
    }
  ],
  "outOfDate": false
}
```
```

--------------------------------

### Create and Use Form Instance with useForm Hook (React JSX)

Source: https://github.com/react-component/field-form/blob/master/README.md

Demonstrates how to create a form instance using the `Form.useForm` hook and pass it to the Form component. This allows for direct manipulation and access to form state within functional components.

```jsx
const Demo = () => {
  const [form] = Form.useForm();
  return <Form form={form} />;
};
```

--------------------------------

### TypeScript Integration for Type-Safe Forms with rc-field-form

Source: https://context7.com/react-component/field-form/llms.txt

This code snippet demonstrates how to integrate `rc-field-form` with TypeScript to achieve type safety. It defines an interface for form values, uses `Form.useForm` with a generic type, and shows type-safe ways to handle form submission, manual validation, and retrieving field values. Dependencies include `rc-field-form`.

```typescript
import Form, { Field } from 'rc-field-form';
import type { FormInstance } from 'rc-field-form';

// Define form values type
interface UserFormValues {
  username: string;
  email: string;
  age: number;
  address: {
    city: string;
    zipCode: string;
  };
  hobbies: string[];
}

const TypeSafeForm = () => {
  const [form] = Form.useForm<UserFormValues>();

  const handleSubmit = (values: UserFormValues) => {
    // values is fully typed
    console.log(values.username); // string
    console.log(values.age); // number
    console.log(values.address.city); // string
    console.log(values.hobbies); // string[]
  };

  const handleManualValidation = async () => {
    try {
      // Return type is UserFormValues
      const values = await form.validateFields();
      console.log(values.email); // Type-safe access
    } catch (error) {
      console.error('Validation failed');
    }
  };

  const handleGetValues = () => {
    // Type-safe field access
    const username = form.getFieldValue('username'); // any (runtime)
    const age = form.getFieldValue('age');

    // Type-safe full form values
    const allValues = form.getFieldsValue(); // UserFormValues
    console.log(allValues.address.city);
  };

  return (
    <Form<UserFormValues>
      form={form}
      onFinish={handleSubmit}
      initialValues={{
        username: '',
        email: '',
        age: 0,
        address: { city: '', zipCode: '' },
        hobbies: []
      }}
    >
      <Field name="username" rules={[{ required: true }]}>
        <input />
      </Field>

      <Field name="email" rules={[{ type: 'email', required: true }]}>
        <input />
      </Field>

      <Field name="age" rules={[{ type: 'number' }]}>
        <input type="number" />
      </Field>

      <Field name={['address', 'city']}>
        <input />
      </Field>

      <Field name={['address', 'zipCode']}>
        <input />
      </Field>

      <Form.List name="hobbies">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <Field key={field.key} name={[field.name]}>
                <input />
              </Field>
            ))}
            <button type="button" onClick={() => add()}>Add Hobby</button>
          </>
        )}
      </Form.List>

      <button type="submit">Submit</button>
    </Form>
  );
};

```

--------------------------------

### Async Validation with validateFields in Field Form

Source: https://github.com/react-component/field-form/blob/master/README.md

This code snippet shows how to use async/await with the `validateFields` method in Field Form. It attempts to validate form fields and logs the values upon success or iterates through errors if validation fails. No external dependencies are required beyond the Field Form library itself. The input is form data, and the output is either the validated form values or a list of errors.

```javascript
async function() {
  try {
    const values = await form.validateFields();
    console.log(values);
  } catch (errorList) {
    errorList.forEach(({ name, errors }) => {
      // Do something...
    });
  }
}
```

--------------------------------

### Conditional Fields using shouldUpdate and dependencies in React

Source: https://context7.com/react-component/field-form/llms.txt

This TypeScript code snippet demonstrates conditional field rendering in a React form using the `rc-field-form` library. It uses `shouldUpdate` to re-render a section of the form when the 'accountType' field changes, displaying relevant fields for 'business' or 'personal' accounts. An alternative approach using the `dependencies` prop is also shown for a 'description' field.

```typescript
import Form, { Field } from 'rc-field-form';
import React from 'react';

const ConditionalFieldsForm = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form} onFinish={(values) => console.log(values)}>
      <Field name="accountType" rules={[{ required: true }]}>
        <select>
          <option value="">Select Account Type</option>
          <option value="personal">Personal</option>
          <option value="business">Business</option>
        </select>
      </Field>

      {/* Conditional field using shouldUpdate */}
      <Field shouldUpdate={(prevValues, currentValues) => prevValues.accountType !== currentValues.accountType}>
        {() => {
          const accountType = form.getFieldValue('accountType');

          if (accountType === 'business') {
            return (
              <>
                <Field name="companyName" rules={[{ required: true, message: 'Company name is required' }]}>
                  <input placeholder="Company Name" />
                </Field>

                <Field name="taxId" rules={[{ required: true }]}>
                  <input placeholder="Tax ID" />
                </Field>
              </>
            );
          }

          if (accountType === 'personal') {
            return (
              <Field name="dateOfBirth" rules={[{ required: true }]}>
                <input type="date" placeholder="Date of Birth" />
              </Field>
            );
          }

          return null;
        }}
      </Field>

      {/* Alternative: Using dependencies prop */}
      <Field dependencies={['accountType']}>
        {() => {
          const accountType = form.getFieldValue('accountType');
          if (!accountType) return null;

          return (
            <Field name="description">
              <textarea placeholder={`Describe your ${accountType} account...`} />
            </Field>
          );
        }}
      </Field>

      <button type="submit">Submit</button>
    </Form>
  );
};

```

--------------------------------

### useWatch Hook for Reactive Value Watching in rc-field-form

Source: https://context7.com/react-component/field-form/llms.txt

Illustrates the use of the `useWatch` hook from rc-field-form to reactively track changes in form field values. It supports watching single fields, nested fields with array paths, using selector functions, and watching all form values. Requires 'rc-field-form'.

```typescript
import Form, { Field } from 'rc-field-form';

const WatchedFieldsForm = () => {
  const [form] = Form.useForm();

  // Watch single field
  const username = Form.useWatch('username', form);

  // Watch nested field with array path
  const city = Form.useWatch(['address', 'city'], form);

  // Watch with selector function
  const fullName = Form.useWatch((values) => {
    return `${values.firstName || ''} ${values.lastName || ''}`.trim();
  }, form);

  // Watch all values
  const allValues = Form.useWatch([], form);

  return (
    <div>
      <Form form={form} initialValues={{ firstName: 'John', lastName: 'Doe' }}>
        <Field name="username">
          <input placeholder="Username" />
        </Field>

        <Field name="firstName">
          <input placeholder="First Name" />
        </Field>

        <Field name="lastName">
          <input placeholder="Last Name" />
        </Field>

        <Field name={['address', 'city']}>
          <input placeholder="City" />
        </Field>
      </Form>

      <div style={{ marginTop: 16, padding: 8, background: '#f0f0f0' }}>
        <p>Username: {username || '(empty)'}</p>
        <p>City: {city || '(empty)'}</p>
        <p>Full Name: {fullName || '(empty)'}</p>
        <p>All Values: {JSON.stringify(allValues, null, 2)}</p>
      </div>
    </div>
  );
};

```

--------------------------------

### React Async Validation with API Calls using rc-field-form

Source: https://context7.com/react-component/field-form/llms.txt

Shows how to implement asynchronous validation for form fields, including checking username availability against a simulated API. It uses custom validator functions and `validateTrigger` to provide real-time feedback during user input.

```typescript
import Form, { Field } from 'rc-field-form';
import type { Rule } from 'rc-field-form';

// Simulate API call to check username availability
const checkUsernameAvailable = (username: string): Promise<boolean> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // Simulate taken usernames
      const takenUsernames = ['admin', 'user', 'test'];
      resolve(!takenUsernames.includes(username.toLowerCase()));
    }, 1000);
  });
};

const AsyncValidationForm = () => {
  const [form] = Form.useForm();

  const usernameRules: Rule[] = [
    { required: true, message: 'Username is required' },
    { min: 3, message: 'Username must be at least 3 characters' },
    {
      // Async validator
      validator: async (_, value) => {
        if (!value) return Promise.resolve();

        const isAvailable = await checkUsernameAvailable(value);
        if (!isAvailable) {
          return Promise.reject(new Error('Username is already taken'));
        }
        return Promise.resolve();
      },
    },
  ];

  return (
    <Form form={form} onFinish={(values) => console.log('Valid:', values)}>
      <Field name="username" rules={usernameRules} validateTrigger="onBlur">
        <input placeholder="Username (try: admin, user, test)" />
      </Field>

      {/* Show validating status */}
      <Field shouldUpdate>
        {() => {
          const isValidating = form.isFieldValidating('username');
          const errors = form.getFieldError('username');

          return (
            <div style={{ marginTop: 8 }}>
              {isValidating && <span style={{ color: 'blue' }}>Checking username...</span>}
              {errors.length > 0 && (
                <span style={{ color: 'red' }}>{errors[0]}</span>
              )}
              {!isValidating && errors.length === 0 && form.isFieldTouched('username') && (
                <span style={{ color: 'green' }}>Username available!</span>
              )}
            </div>
          );
        }}
      </Field>

      <button type="submit">Submit</button>
    </Form>
  );
};

```

--------------------------------

### React Form Reset and Field Preservation with rc-field-form

Source: https://context7.com/react-component/field-form/llms.txt

Demonstrates how to reset form fields to their initial values or specific fields using `form.resetFields()`. It also shows how to control field value preservation when fields unmount, with both form-level and field-level overrides.

```typescript
import Form, { Field } from 'rc-field-form';
import React, { useState } from 'react';

const ResetAndPreserveForm = () => {
  const [form] = Form.useForm();
  const [showExtraField, setShowExtraField] = useState(true);

  return (
    <>
      <Form
        form={form}
        initialValues={{ username: 'john', email: 'john@example.com' }}
        preserve={false} // Don't preserve field values when fields unmount (default is true)
      >
        <Field name="username">
          <input placeholder="Username" />
        </Field>

        <Field name="email">
          <input placeholder="Email" />
        </Field>

        {showExtraField && (
          <Field name="phone" preserve={true}> {/* Override form-level preserve */}
            <input placeholder="Phone (value preserved when hidden)" />
          </Field>
        )}

        <button type="submit">Submit</button>
      </Form>

      <div style={{ marginTop: 16 }}>
        <button onClick={() => {
          // Reset all fields to initial values
          form.resetFields();
        }}>
          Reset All Fields
        </button>

        <button onClick={() => {
          // Reset specific fields
          form.resetFields(['email']);
        }}>
          Reset Email Only
        </button>

        <button onClick={() => {
          // Get all values including unmounted fields (if preserve=true)
          const allValues = form.getFieldsValue(true);
          console.log('All values:', allValues);
        }}>
          Get All Values
        </button>

        <button onClick={() => setShowExtraField(!showExtraField)}>
          {showExtraField ? 'Hide' : 'Show'} Phone Field
        </button>
      </div>
    </>
  );
};

```

--------------------------------

### Nested Form Fields with rc-field-form

Source: https://context7.com/react-component/field-form/llms.txt

Demonstrates how to manage deeply nested form fields using array notation for field names in rc-field-form. It covers initialization, accessing nested values, and submission. This requires the 'rc-field-form' library.

```typescript
import Form, { Field } from 'rc-field-form';

const NestedFieldsForm = () => {
  const [form] = Form.useForm();

  return (
    <Form
      form={form}
      initialValues={{
        user: {
          name: 'John',
          profile: {
            age: 25,
            address: {
              city: 'New York',
              zipCode: '10001'
            }
          }
        }
      }}
      onFinish={(values) => {
        console.log('Nested values:', values);
        // values = { user: { name: 'John', profile: { age: 25, address: { city: 'New York', zipCode: '10001' } } } }
      }}
    >
      {/* Nested path using array notation */}
      <Field name={['user', 'name']} rules={[{ required: true }]}>
        <input placeholder="Name" />
      </Field>

      <Field name={['user', 'profile', 'age']} rules={[{ type: 'number', min: 0 }]}>
        <input type="number" placeholder="Age" />
      </Field>

      <Field name={['user', 'profile', 'address', 'city']}>
        <input placeholder="City" />
      </Field>

      <Field name={['user', 'profile', 'address', 'zipCode']}>
        <input placeholder="Zip Code" />
      </Field>

      <button
        type="button"
        onClick={() => {
          // Access nested values
          const userName = form.getFieldValue(['user', 'name']);
          const userAge = form.getFieldValue(['user', 'profile', 'age']);
          const city = form.getFieldValue(['user', 'profile', 'address', 'city']);
          console.log({ userName, userAge, city });
        }}
      >
        Get Nested Values
      </button>

      <button type="submit">Submit</button>
    </Form>
  );
};

```

--------------------------------

### Dynamic Field Arrays with Form.List in React

Source: https://context7.com/react-component/field-form/llms.txt

Shows how to manage dynamic lists of form fields using Form.List from the rc-field-form library. This allows adding, removing, and reordering fields within an array, typically used for multiple entries like users or items. Dependencies: 'rc-field-form'.

```typescript
import Form, { Field } from 'rc-field-form';

const DynamicFieldsForm = () => {
  return (
    <Form
      initialValues={{
        users: [
          { name: 'John', email: 'john@example.com' },
          { name: 'Jane', email: 'jane@example.com' }
        ]
      }}
      onFinish={(values) => {
        console.log('Submitted users:', values.users);
        // values.users = [{ name: 'John', email: 'john@example.com' }, ...]
      }}
    >
      <Form.List name="users">
        {(fields, { add, remove, move }) => (
          <div>
            {fields.map((field, index) => (
              <div key={field.key} style={{ marginBottom: 16, border: '1px solid #ccc', padding: 8 }}>
                <h4>User #{index + 1}</h4>

                <Field
                  name={[field.name, 'name']}
                  rules={[{ required: true, message: 'Name is required' }]}
                >
                  <input placeholder="Name" />
                </Field>

                <Field
                  name={[field.name, 'email']}
                  rules={[{ type: 'email', required: true }]}
                >
                  <input placeholder="Email" />
                </Field>

                <button type="button" onClick={() => remove(field.name)}>
                  Remove User
                </button>

                {index > 0 && (
                  <button type="button" onClick={() => move(index, index - 1)}>
                    Move Up
                  </button>
                )}
              </div>
            ))}

            <button type="button" onClick={() => add()}>
              Add User
            </button>

            <button type="button" onClick={() => add({ name: 'New User', email: '' }, 0)}>
              Add User at Start
            </button>
          </div>
        )}
      </Form.List>

      <button type="submit">Submit All Users</button>
    </Form>
  );
};

```

--------------------------------

### Validate Form Fields with rc-field-form in TypeScript

Source: https://context7.com/react-component/field-form/llms.txt

Demonstrates how to validate all fields in a form or specific fields using the `validateFields` method from rc-field-form. It handles both successful validation and error scenarios, providing insights into returned error information.

```typescript
import Form, { Field } from 'rc-field-form';
import type { FormInstance } from 'rc-field-form';

const ValidationForm = () => {
  const [form] = Form.useForm();

  const handleValidateAll = async () => {
    try {
      const values = await form.validateFields();
      console.log('All fields valid:', values);
    } catch (errorInfo) {
      console.log('Validation failed:', errorInfo);
      // errorInfo = {
      //   values: { username: 'john', email: '' },
      //   errorFields: [{ name: ['email'], errors: ['Email is required'] }],
      //   outOfDate: false
      // }
    }
  };

  const handleValidateSpecific = async () => {
    try {
      // Validate only specific fields
      await form.validateFields(['email', 'username']);
      console.log('Selected fields valid');
    } catch (errorInfo) {
      console.log('Selected fields invalid:', errorInfo);
    }
  };

  return (
    <Form form={form} onFinish={(values) => console.log('Submit:', values)}>
      <Field name="username" rules={[{ required: true, message: 'Username is required' }]}>
        <input placeholder="Username" />
      </Field>

      <Field
        name="email"
        rules={[
          { required: true, message: 'Email is required' },
          { type: 'email', message: 'Invalid email format' }
        ]}>
        <input placeholder="Email" />
      </Field>

      <button type="submit">Submit</button>
    </Form>
    // ... buttons for validation actions
  );
};

```

--------------------------------

### React Form Validation with rc-field-form

Source: https://context7.com/react-component/field-form/llms.txt

Demonstrates how to use the Field component from rc-field-form to implement various validation rules for form inputs. Includes required, email, length, pattern, and custom validators, as well as number range validation and data normalization. Dependencies: 'rc-field-form'.

```typescript
import Form, { Field } from 'rc-field-form';

const RegistrationForm = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form}>
      {/* Required field */}
      <Field name="username" rules={[{ required: true, message: 'Required!' }]}>
        <input placeholder="Username" />
      </Field>

      {/* Email validation */}
      <Field name="email" rules={[{ type: 'email', required: true }]}>
        <input placeholder="Email" />
      </Field>

      {/* Length validation */}
      <Field
        name="phone"
        rules={[
          { len: 10, message: 'Phone must be exactly 10 digits' },
          { pattern: /^\d+$/, message: 'Phone must contain only digits' }
        ]}
      >
        <input placeholder="Phone (10 digits)" />
      </Field>

      {/* Custom validator */}
      <Field name="password" rules={[{ required: true }]}>
        <input type="password" placeholder="Password" />
      </Field>

      <Field
        name="confirmPassword"
        dependencies={['password']}
        rules={[
          { required: true, message: 'Please confirm password' },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('Passwords do not match!'));
            },
          }),
        ]}
      >
        <input type="password" placeholder="Confirm Password" />
      </Field>

      {/* Number range validation */}
      <Field
        name="age"
        rules=    [
          { type: 'number', required: true },
          { min: 18, max: 100, message: 'Age must be between 18 and 100' }
        ]
        normalize={(value) => Number(value)} // Convert string to number
      >
        <input type="number" placeholder="Age" />
      </Field>

      <button type="submit">Register</button>
    </Form>
  );
};

```

--------------------------------

### Access Form Instance via Ref in Class Component (React JSX)

Source: https://github.com/react-component/field-form/blob/master/README.md

Illustrates how class components can obtain a form instance using a ref. The `setRef` method receives the form instance, enabling interaction with the form from class-based components.

```jsx
class Demo extends React.Component {
  setRef = form => {
    // Form instance here
  };

  render() {
    return <Form ref={this.setRef} />;
  }
}
```

--------------------------------

### Custom Field Components with Value Binding in React

Source: https://context7.com/react-component/field-form/llms.txt

This snippet shows how to create custom form components (Checkbox, MultiSelect) and integrate them with rc-field-form. It utilizes props like `valuePropName`, `getValueFromEvent`, `getValueProps`, `normalize`, and `trigger` to customize how the form interacts with these custom components, allowing for flexible data binding and event handling.

```typescript
import Form, { Field } from 'rc-field-form';
import React, { useState } from 'react';

// Custom checkbox component
const Checkbox = ({ value, onChange, children }) => (
  <label>
    <input
      type="checkbox"
      checked={value}
      onChange={(e) => onChange(e.target.checked)}
    />
    {children}
  </label>
);

// Custom select component
const MultiSelect = ({ value = [], onChange, options }) => {
  return (
    <select
      multiple
      value={value}
      onChange={(e) => {
        const values = Array.from(e.target.selectedOptions, option => option.value);
        onChange(values);
      }}
    >
      {options.map(opt => (
        <option key={opt.value} value={opt.value}>{opt.label}</option>
      ))}
    </select>
  );
};

const CustomComponentsForm = () => {
  return (
    <Form
      onFinish={(values) => {
        console.log('Form values:', values);
        // values = {
        //   agree: true,
        //   skills: ['react', 'typescript'],
        //   rating: 4
        // }
      }}
    >
      {/* Checkbox with custom valuePropName */}
      <Field name="agree" valuePropName="checked" initialValue={false}>
        <Checkbox>I agree to the terms</Checkbox>
      </Field>

      {/* Multi-select */}
      <Field name="skills" initialValue={[]}>
        <MultiSelect options={[
          { value: 'react', label: 'React' },
          { value: 'vue', label: 'Vue' },
          { value: 'angular', label: 'Angular' },
          { value: 'typescript', label: 'TypeScript' }
        ]} />
      </Field>

      {/* Custom getValueFromEvent */}
      <Field
        name="rating"
        getValueFromEvent={(e) => parseInt(e.target.value, 10)}
      >
        <input type="range" min="1" max="5" />
      </Field>

      {/* Custom getValueProps - transform value before passing to component */}
      <Field
        name="price"
        getValueProps={(value) => ({
          value: value ? `$${value}` : ''
        })}
        normalize={(value) => value.replace(/\$/g, '')}
      >
        <input placeholder="Price (with $)" />
      </Field>

      {/* Trigger on blur instead of change */}
      <Field name="description" trigger="onBlur">
        <textarea placeholder="Description (saved on blur)" />
      </Field>

      <button type="submit">Submit</button>
    </Form>
  );
};

```

--------------------------------

### Field Form Validation Message Templates

Source: https://github.com/react-component/field-form/blob/master/README.md

Describes the properties for customizing validation error messages in Field Form. These templates correspond to different validation rule props, allowing for user-friendly error feedback.

```typescript
interface ValidateMessages {
  enum?: string;
  len?: string;
  max?: string;
  min?: string;
  name?: string;
  pattern?: string;
  type?: string;
}
```

--------------------------------

### Field Form List Operations Props

Source: https://github.com/react-component/field-form/blob/master/README.md

Specifies the available operations for managing lists within Field Form. The `add` function initializes a new item, and the `remove` function deletes an item by its index.

```typescript
interface ListOperations {
  add: (initValue: any) => void;
  remove: (index: number) => void;
}
```

--------------------------------

### Check Field Status with rc-field-form in TypeScript

Source: https://context7.com/react-component/field-form/llms.txt

Illustrates how to check the status of form fields using `rc-field-form`. This includes checking if a field is touched, if any fields are touched, if all fields are touched, if a field is currently validating, and retrieving field-specific errors.

```typescript
import Form, { Field } from 'rc-field-form';
import type { FormInstance } from 'rc-field-form';

const ValidationForm = () => {
  const [form] = Form.useForm();

  const handleCheckStatus = () => {
    // Check if field is touched
    const isUsernameTouched = form.isFieldTouched('username');
    console.log('Username touched:', isUsernameTouched);

    // Check if any fields are touched
    const anyTouched = form.isFieldsTouched();
    console.log('Any fields touched:', anyTouched);

    // Check if all fields are touched
    const allTouched = form.isFieldsTouched(true);
    console.log('All fields touched:', allTouched);

    // Check if field is validating
    const isValidating = form.isFieldValidating('email');
    console.log('Email validating:', isValidating);

    // Get field errors
    const emailErrors = form.getFieldError('email');
    console.log('Email errors:', emailErrors); // string[]

    // Get multiple field errors
    const allErrors = form.getFieldsError(['username', 'email']);
    console.log('All errors:', allErrors);
    // [{ name: ['username'], errors: [], warnings: [] }, { name: ['email'], errors: ['Required'], warnings: [] }]
  };

  return (
    // ... Form definition ...
    <div style={{ marginTop: 16 }}>
      <button onClick={handleCheckStatus}>Check Status</button>
    </div>
  );
};

```

--------------------------------

### Manually Set Field Status with rc-field-form in TypeScript

Source: https://context7.com/react-component/field-form/llms.txt

Shows how to manually update the state of form fields using `rc-field-form`. The `setFields` method allows direct modification of field values, errors, touched status, and validating status, providing fine-grained control over the form's state.

```typescript
import Form, { Field } from 'rc-field-form';
import type { FormInstance } from 'rc-field-form';

const ValidationForm = () => {
  const [form] = Form.useForm();

  const handleSetFieldStatus = () => {
    // Manually set field value and error
    form.setFields([
      {
        name: 'username',
        value: 'admin',
        errors: ['Username already taken'],
        touched: true,
        validating: false
      },
      {
        name: 'email',
        errors: [], // Clear errors
      }
    ]);
  };

  return (
    // ... Form definition ...
    <div style={{ marginTop: 16 }}>
      <button onClick={handleSetFieldStatus}>Set Field Status</button>
    </div>
  );
};

```

--------------------------------

### Field Form Validation Rule Properties

Source: https://github.com/react-component/field-form/blob/master/README.md

Defines the properties available for validation rules in Field Form. These include type checks, length constraints, patterns, and custom validators. The `validator` prop can accept a callback or a Promise for asynchronous validation.

```typescript
interface Rule {
  enum?: any[];
  len?: number;
  max?: number;
  message?: string;
  min?: number;
  pattern?: RegExp;
  required?: boolean;
  transform?: (value: any) => any;
  type?: string;
  validator?: (rule: Rule, value: any, callback: (error?: string) => void, form: UseForm) => Promise<void> | void;
  whitespace?: boolean;
  validateTrigger?: string | string[];
}
```

--------------------------------

### Iterating Over Field Errors in JavaScript

Source: https://github.com/react-component/field-form/blob/master/README.md

Demonstrates a common pattern for handling form field errors in JavaScript, specifically addressing the change in `getFieldsError` behavior. The code safely iterates over the errors array, providing an empty array if no errors exist.

```javascript
(form.getFieldsError('fieldName') || []).forEach(() => {
  // Do something...
});
```

--------------------------------

### Display Field Errors Conditionally with rc-field-form in TypeScript

Source: https://context7.com/react-component/field-form/llms.txt

Demonstrates how to conditionally display error messages for a specific field ('email' in this case) within a React component using `rc-field-form`. It utilizes the `getFieldError` method and a `shouldUpdate` prop on the `Field` component to dynamically render error messages.

```typescript
import Form, { Field } from 'rc-field-form';
import type { FormInstance } from 'rc-field-form';

const ValidationForm = () => {
  const [form] = Form.useForm();

  return (
    <Form form={form} onFinish={(values) => console.log('Submit:', values)}>
      {/* ... other fields ... */}
      <Field name="email"
        rules={[
          { required: true, message: 'Email is required' },
          { type: 'email', message: 'Invalid email format' }
        ]}>
        <input placeholder="Email" />
      </Field>

      {/* Display field errors */}
      <Field shouldUpdate>
        {() => {
          const errors = form.getFieldError('email');
          return errors.length > 0 ? (
            <div style={{ color: 'red' }}>
              {errors.map((error, index) => <div key={index}>{error}</div>)}
            </div>
          ) : null;
        }}
      </Field>

      <button type="submit">Submit</button>
    </Form>
  );
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.