Object Nested Form

WdFormObj

Property Description

External properties received by the component

Property Name	Property Identifier	Type	Description

Display Headlines	labelVisible	boolean	Default value: true
Title alignment	labelAlign	string	In the scenario, the form by default follows the title alignment configuration of the form container.
Line break in heading	labelWrap	boolean	If the title content is too long when closed, show one line with overflow omitted; when enabled, show with line breaks. In form scenarios, it follows the form container's title line break configuration by default.
PC title position	layout	string	Set title display position in form component. In the scenario, it follows the title position configuration of the form container by default.
Title width	labelWidth	string	You can enter a value with units such as px or %, for example: 200px. In the scenario, the form follows the title width configuration of the form container by default.
Heading Note	labelTips	string	Take effect on PC/H5 Configure tooltip content for the heading
Status.	status	string	Example: "edit"
Bound field	name	string	The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.
Title content.	label	string	Example: "标题"
Nested form value of an object	value		Example: {}
Template	mode	string	Example: "obj"
PC component dimension	size	string	Size configuration is only applicable to PC and takes effect by default in form container scenarios.

Event Description

Events exposed by the component. You can listen to component events to trigger external actions

Event Name	Event Code	Event Output Parameters event.detail	Applicable Scenarios	Description

value change

onDataChange

object data: array

Compatible with all platforms

Trigger when the data content in a component changes

Properties API

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name	Property Identifier	Type	Description

Bound field	name	string	The Key value of a form field is used to match the field identifier of the data model when submitting data. It must be unique within the form.
Title content.	label	string
Nested form value of an object	value
Indicates whether to display	visible	boolean	Whether to display the component
Whether to disable	disabled	boolean	Component Disabled
Specify whether it is read-only or not.	readOnly	boolean	Whether the component is read-only

Method API

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name	Method Identifier	Parameters	Method Description

value change

change

object name: string改变值的标识，如果name为空，则会将嵌套表单值直接赋值为进value value: 改变值的value

-

Style API

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name	Class Name	Description and Examples

root element	.wd-form-obj-root	Outermost component element /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-form-obj-root { /* Write CSS styles here */ }
H5 root element	.wd-h5-form-obj-root	Settable root element style for the H5 side /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-h5-form-obj-root { /* Write CSS styles here */ }
PC-side root element	.wd-pc-form-obj-root	Settable root element style for the PC side /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-pc-form-obj-root { /* Write CSS styles here */ }
Mini program root element	.wd-mp-form-obj-root	Settable root element style for mini program /* :scope refers to the current component element */ /* For details, refer to the Style API documentation */ :scope.wd-mp-form-obj-root { /* Write CSS styles here */ }

Learn about Style API

Usage Example

1. Create an object-type field in the data model, such as a "Product Attributes" field, and add two sub-attributes: "Stock" and "Price".
2. In the editor, use the "form container component" to see the "product attributes" field above, which is automatically mapped to the object nested form component.