VoidField
Description
As the React implementation of createVoidField from @silver-formily/core, it is a bridge component dedicated to binding a ViewModel to virtual layout controls. It can be used to control the display state, interaction pattern, etc. of data fields. See IVoidFieldFactoryProps for the VoidField component props.
Usage
This example demonstrates how to use VoidField to control the visibility of child nodes. Note that when VoidField is hidden, the data of its child nodes is cleared at the same time, because visible being false means the display is none, and this kind of hiding does not preserve field values.
However, when it is shown again, the previous state is restored. This is an internal feature of Formily Core, which supports fully restoring the previous state.
import { createForm } from '@silver-formily/core'
import { Field, FormConsumer, FormProvider, VoidField } from '@silver-formily/react'
import { Button, Input, Space } from 'antd'
const form = createForm()
export default function Demo() {
return (
<FormProvider form={form}>
<Space>
<VoidField name="layout">
<Field name="input" component={[Input]} />
</VoidField>
<FormConsumer>
{_form => (
<Space>
<Button
onClick={() => {
_form
.query('layout')
.take()
?.setState((state) => {
state.visible = !state.visible
})
}}
>
{form.query('layout').get('visible') ? 'Hide' : 'Show'}
</Button>
<div style={{ whiteSpace: 'pre' }}>
{JSON.stringify(form.values, null, 2)}
</div>
</Space>
)}
</FormConsumer>
</Space>
</FormProvider>
)
}import { createForm } from '@silver-formily/core'
import { Field, FormConsumer, FormProvider, VoidField } from '@silver-formily/react'
import { Button, Input, Space } from 'antd'
const form = createForm()
export default function Demo() {
return (
<FormProvider form={form}>
<Space>
<VoidField name="layout">
<Field name="input" component={[Input]} />
</VoidField>
<FormConsumer>
{_form => (
<Space>
<Button
onClick={() => {
_form
.query('layout')
.take()
?.setState((state) => {
state.visible = !state.visible
})
}}
>
{form.query('layout').get('visible') ? 'Hide' : 'Show'}
</Button>
<div style={{ whiteSpace: 'pre' }}>
{JSON.stringify(form.values, null, 2)}
</div>
</Space>
)}
</FormConsumer>
</Space>
</FormProvider>
)
}Properties
Void fields have no value, but reactions can track other fields or observable state normally. They do not receive data-field value or model event wrappers; component event callbacks pass through directly.
| Attribute | Description | Type | Default |
|---|---|---|---|
| name | Path of the node in the Form, must be unique | FormPathPattern | — |
| basePath | Base path used to resolve name, suitable for reuse in array/nested structures | FormPathPattern | Parent field address, otherwise form root |
| title | Layout node title, usually mapped to the label of the decorator component | any | — |
| description | Layout node description | any | — |
| display | Display state: visible, hidden or none | enum | visible |
| pattern | Interaction pattern: editable, disabled, readOnly, readPretty | enum | editable |
| hidden | Hide rendering while retaining values (display: hidden) | boolean | false |
| visible | false sets display: none; true sets display: visible | boolean | true |
| editable | Whether editing is allowed (usually affects child nodes) | boolean | true |
| disabled | Whether interaction is disabled | boolean | false |
| readOnly | Whether to enter read-only mode | boolean | false |
| readPretty | Set the readPretty pattern, which descendants can inherit | boolean | false |
| decorator | Decorator component and its props, in the form [Decorator, props] | [] | [D] | [D, Partial<React.ComponentProps<D>>] | — |
| decoratorContent beta | Decorator content: plain content (string / ReactNode) is passed to the decorator as the conventional content prop, object maps are spread into multiple decorator props and take precedence over same-named decorator props | string | React.ReactNode | Record<string, React.ReactNode> | — |
| component | Layout rendering component and its props, in the form [Component, props] | [] | [C] | [C, Partial<React.ComponentProps<C>>] | — |
| reactions | Reaction responders, supports a single function or an array of functions | FieldReaction[] | FieldReaction | — |
| mountedReactions 1.0.0 | Reaction responders that start once the first batch of form fields has fully mounted, and stop automatically when the field unmounts | FieldReaction[] | FieldReaction | — |
| children | Child nodes or render function | React.ReactNode Function | — |
Additional optional props: content?: any and data?: any from Core; children?: RenderPropsChildren<VoidField>. name is required. Lifecycle behavior matches Field.
Core declares title, description, and content as any; values placed in the rendered React tree must still be valid ReactNode values. Display/pattern defaults in the table assume no overriding parent or form state.