Form form

Encapsulation of rc-field-form, providing effects similar to antd Form

Effect demonstration

1. FormItem usage

import { Form } from "packages";

//...other imports
const { FormItem, FormListItem, useForm } = Form;

export default function FormDemo() {
  const [form] = useForm();

  return (
    <Form onFinish={handleFinish} form={form}>
      <FormItem
        name="useCharacter2"
        rules={[{ required: true, message: "Please enter your name" }]}
      >
        <InputItem
          required
          label="Name"
          placeholder="Please enter your name"
          inputStyle={{ textAlign: "right" }}
        />
      </FormItem>
      <FormItem
        name="vehicleLoad2"
        rules={[{ required: true, message: "Please enter your password" }]}
      >
        <InputItem
          required
          label="Password"
          placeholder="Please enter password"
          inputStyle={{ textAlign: "right" }}
        />
      </FormItem>
    </Form>
  );
}

2. FormListItem use

import { Form } from "packages";

//...other imports

const { FormItem, FormListItem, useForm } = Form;

export default function FormDemo() {
  const [form] = useForm();

  return (
    <Form onFinish={handleFinish} form={form}>
      <FormListItem
        title="Gender"
        required
        name="gender"
        rules={[{ required: true, message: "Please select gender" }]}
      >
        <Radio
          options={[
            { label: "Male", value: "1" },
            { label: "Female", value: "0" },
          ]}
        />
      </FormListItem>
      <FormListItem
        title="Gender"
        required
        name="gender"
        rules={[{ required: true, message: "Please select gender" }]}
      >
        <Checkbox
          showCheckAll={false}
          options={[
            { label: "Male", value: "1" },
            { label: "Female", value: "0" },
          ]}
        />
      </FormListItem>
      <FormListItem
        title="Quantity"
        required
        name="count"
        minHeight={48}
        rules={[{ required: true, message: "Please select the quantity" }]}
      >
        <Stepper />
      </FormListItem>
      <FormListItem
        title="Quantity"
        required
        name="count"
        minHeight={48}
        rules={[{ required: true, message: "Please select the quantity" }]}
      >
        <Switch />
      </FormListItem>
      <FormListItem
        title="Quantity"
        required
        name="count"
        minHeight={48}
        rules={[{ required: true, message: "Please select the quantity" }]}
      >
        <NumberKeyboard.NumberKeyboardInput
          type="number"
          placeholder="Quality"
        />
      </FormListItem>
    </Form>
  );
}

3. Verification failure prompt effect

import { Form } from "packages";

//...other imports

const { FormItem, FormListItem, useForm } = Form;

export default function FormDemo() {
  const [form] = useForm();

  return (
    <Form onFinish={handleFinish} form={form}>
      <FormItem
        type="all"
        name="name"
        rules={[{ required: true, message: "Please enter your username" }]}
      >
        <Input
          required
          label="Username"
          labelPosition="top"
          placeholder="Please enter username"
        />
      </FormItem>
      <FormItem
        type="all"
        name="password"
        rules={[{ required: true, message: "Please enter your password" }]}
      >
        <Input
          required
          label="Password"
          labelPosition="top"
          placeholder="Please enter password"
        />
      </FormItem>
      <FormItem type="all" name="count2">
        <NumberKeyboard.NumberKeyboardInput
          label="Approved download quality"
          type="number"
          placeholder="Please enter the approved download quality"
        />
      </FormItem>
    </Form>
  );
}

API

Form API

import { FormProps as RcFormProps } from "rc-field-form/es/Form";

export type FormProps = Omit<RcFormProps, "component">;

FormItem API

import type { FieldProps } from "rc-field-form/lib/Field";

type RcFieldProps = Omit<FieldProps, "children">;
export interface FormItemProps extends RcFieldProps {
  type?: "bottom" | "all";
  children: ReactElement;
}

FormListItem API

import type { FieldProps } from "rc-field-form/lib/Field";

import { ListItemProps } from "../list-item";

type RcFieldProps = Omit<FieldProps, "children">;
export interface FormListItemProps
  extends RcFieldProps,
    Pick<
      ListItemProps,
      | "title"
      | "required"
      | "style"
      | "thumb"
      | "onPress"
      | "minHeight"
      | "arrow"
    > {
  children: ReactElement;
}