Form ​

The form component is built on top of TDesign Form, supporting TDesign component parameters. It's also extended with hooks to support Refine's data requests. Here's how to use it:

import { Form } from '@duxweb/dux-refine'

<Form>
  {/* Form items */}
</Form>

import { Form } from '@duxweb/dux-refine'

<Form>
  {/* Form items */}
</Form>

The resource name for form submission is automatically recognized based on the parent page's route. You can also configure it manually. Inside the child component, you can use TDesign's form elements.

import { Form as DuxForm } from '@duxweb/dux-refine'
import { Form, Input } from 'tdesign-react';

<DuxForm>
  <Form.Item
    initialValue="Dux Refine"
    label="Title"
    name="title"
  >
    <Input />
  </Form.Item>
  {/* Other form items */}
</DuxForm>

import { Form as DuxForm } from '@duxweb/dux-refine'
import { Form, Input } from 'tdesign-react';

<DuxForm>
  <Form.Item
    initialValue="Dux Refine"
    label="Title"
    name="title"
  >
    <Input />
  </Form.Item>
  {/* Other form items */}
</DuxForm>

children ​

• Type: React.ReactNode
• Default: undefined

The children elements of the form. If you only need to manage the layout, using Form.Item is sufficient.

resource ​

• Type: string
• Default: undefined

The identifier for the resource, used to bind data resources. It's recognized automatically based on the route.

action ​

• Type: "create" | "edit" | "clone"
• Default: create

The action of the form, used for creating, editing, or cloning data.

id ​

• Type: string | number
• Default: undefined

The primary key id for the form. It's required for editing or cloning data to retrieve form data.

params ​

• Type: [k: string]: any
• Default: undefined

Query parameters used to pass additional GET parameters to the API when fetching form data.

initData ​

• Type: Record<string, any>
• Default: undefined

Initial data for the form. This parameter takes precedence over the form content automatically fetched for editing.

initFormat ​

• Type: (data: Record<string, any>) => Record<string, any>
• Default: undefined

Callback function to format the initial data. This function is called when form data is obtained and is used to process component data.

saveFormat ​

• Type: (data: Record<string, any>) => Record<string, any>
• Default: undefined

Callback function to format data before saving. This function is used to format data before submitting the form.

onSubmit ​

• Type: (e: SubmitContext) => void
• Default: undefined

Callback triggered after form submission.

useFormProps ​

• Type: useFormProps
• Default: undefined

Transmitted parameter for the form hook. This parameter is a wrapper function for Refine useForm. Refer to the documentation for parameter definitions.

import type { FormProps } from 'tdesign-react/esm'

import type { FormProps } from 'tdesign-react/esm'

formProps ​

• Type: FormProps
• Default: undefined

TDesign form parameters. Refer to TDesign Form documentation for details.

onData ​

• Type: (form: UseFormReturnType) => void
• Default: undefined

Data callback triggered when the form data changes. You can use the methods returned by useForm with this callback.