Array Component

In FormCreate, sub-form functionality can be easily implemented through the group component. Sub-form components allow nesting other forms within forms, suitable for handling repetitive form content, such as dynamically adding contacts, product specifications, and other scenarios.

Note

Component linkage within sub-forms is recommended to be implemented using Component Linkage or Computing Component Rules.

When operating components within sub-forms, you need to use the sub-form's API. In the parent form, you can get the operation interface of the specified sub-form through the api.getSubForm method.

Basic Sub-form

Shows a simple sub-form where users can dynamically add and remove form items.

Card Style

Sub-forms added card style in v3.2.31 version

Sub-form with Specified Field

This example shows how to only get the value of a specific field in the sub-form.

Computing Component Display State in Sub-form

Based on the main form radio button's value (show or hide), calculate and set the sub-form input box's hidden property in real-time to achieve cross-level conditional display control.

Listening to Component Events in Sub-form

This example shows how to listen to component events in sub-forms.

Configuration

props

Parameter Name	Description	Type	Default Value
rule (Required)	Generation rules for nested components	Rule[]	-
field	Only get this field in sub-form	String	-
type(v3.2.31)	Component display style	'default' | 'card'	-
expand	Number of sub-forms expanded by default	Number	-
options	Sub-form option configuration	Object	-
button	Whether to show operation buttons	Boolean	-
max	Maximum number of items to add	Number	-
min	Minimum number of items to add	Number	0
modelValue (v-model)	Sub-form value	any[]	-
defaultValue	Set default value for new sub-forms	Object	-
sortBtn	Whether to show sort adjustment button	Boolean	true
disabled	Whether disabled	Boolean	false
onBeforeRemove	Pre-callback when deleting, cancel operation when returning false	(value: any[], index: number) => boolean|Promise|undefined	-
onBeforeAdd	Pre-callback when adding, cancel operation when returning false	(value: any[]) => boolean|undefined	-
parse	Modify form rules before sub-form creation	(rule:Rule[])=>Rule[]	-

events

Event Name	Description	Return Value
change	Triggered after value changes	-
add	Triggered after adding an item	-
remove	Triggered after removing an item	-
itemMounted	Triggered after newly added sub-form initialization is complete	-
[field-eventName]	Listen to sub-form emit events, format is sub-form field name concatenated with event name	-