ModalForm
Generate a modal form through schema configuration.
This component combines Antd Modal and SchemaForm, allowing you to pass through APIs from both components.
Basics
Basic Usage
Uncontrolled Mode (Recommended)
Using RAK's innerRef api, you can control the modal without defining an additional open variable, making it more concise. The following examples use this approach by default.
Form Types
The opened form has three types: new, edit, and read. You can also pass initial values.
onFinish
In the onFinish callback function, you can implement different business logic based on the form type.
onOpen
Use the onOpen callback to trigger API requests or perform other initialization tasks when the modal opens.
Layout
Pass SchemaForm component APIs through the formProps property to change the form layout.
Multiple Columns
Scroll to Error Field in Long Forms
Form Operations
Show and Hide
Use valueType=dependency for show/hide functionality.
Form Data
For form data, please refer to SchemaForm
Convention-based
Like SchemaForm, ModalForm also supports convention-based data processing.
Store Additional Information with innerRef
Like SchemaForm, ModalForm can also store additional data using innerRef.
API
ModalForm
ModalForm types are the combination of ModalFormSelfType and Antd Modal.
ModalFormSelfType
| Property | Description | Type | Default |
|---|---|---|---|
| innerRef | Uncontrolled mode (recommended); when open is not passed, you can open the modal through innerRef; | -- | |
| formRef | Used to get the form instance; please use formRef instead of passing a form instance through the form property. Because RAK components have extra encapsulation for the form instance, you must get it through formRef. | React.MutableRefObject<ProFormInstance> | -- |
| columns | Configuration description for form items; | FormColumnType[] | Required |
| onFinish | Callback after clicking the modal confirm button; | (values, formType, formData) => Promise | void | -- |
| onOpen | Callback after opening the modal, you can request data here; | (formType, formRef, formData) => Promise | void | -- |
| formProps | Parameters passed to the form, please refer to the SchemaForm component API | Omit<SchemaFormProps, 'innerRef' | 'formRef' | 'onFinish' | 'columns' | 'form'> | -- |
| confirmOnClose | Close modal confirmation, a confirmation dialog will appear when form items are modified | boolean | { title?: string; content?: string } | { title: '确认关闭', content: '表单项内容未保存, 是否确认关闭?' } |
ModalFormInnerRefType
| Property | Description | Type | Default |
|---|---|---|---|
| openModal | Used to open the modal; formType can be used to determine the form type in onFinish; | (formType?: FormType | undefined, initialValues?: object | null | undefined, cb?: (() => void) | undefined) => void | Required |
| formType | Current form type | FormType | -- |
| data | Can store some additional data | Record<string, any> | Required |
| setData | Store data; setData works like React's setState, you only need to pass in the fields you care about, and it won't overwrite other fields. | (values: Record<string, any>) => void | Required |