Form Container
WdForm
Practical Guide
Practical Guide for Form/Table Component Binding Expression (query)
Implementation Approach for Pagaged or Step-by-Step Form Submission
Modifying Field Default Values in Form Container Update Scenarios
Applicable Scenarios
Quickly implement scenarios for submitting and displaying form data. After binding a data source, components such as single-line inputs, dropdown selections, and submit buttons can be automatically generated based on field types.
Basic Capabilities Description
- Creating, updating, or viewing form data via the Form Container
- Supports binding data sources of data models or APIs types to achieve data interaction between frontend and backend
- Through field properties, you can control the ordering, visibility, and switching of component types for field mapping within internal form components
- For more practical instructions, refer to the Practical Guide for Common Form Scenarios
Extended Scenarios Description
Calculating and Displaying User Input Data in Forms
Example
The following is a complex value calculation scenario
- formArr1: an array where the value of c in each row is the sum of a and b
- formArr2: an array where the value of c in each row is the sum of a and b
- sum1: the accumulated sum of the c values in formArr1
- sum2: the accumulated sum of the c values in formArr2
Configuration Method
As shown, drag the form container and nested components into place, and configure as needed.
The expression for the value of c as the sum of a and b in the nested component is implemented as follows:Number($w.formArr1.value[$w.index_formArr1].a)*Number($w.formArr1.value[$w.index_formArr1].b)sum1 is the accumulated sum of the c values in the array formArr1
The expression is implemented as follows:$w.form1.value?.formArr1?.reduce((sum, v) => sum +Number(v.c) , 0)sum1+sum2
The expression is implemented as follows:Number($w.form1.value.sum1)+Number($w.form1.value.sum2)sum1/sum2

The expression is implemented as follows:
Number($w.form1.value.sum1)/Number($w.form1.value.sum2)
Dynamically Implementing Data Creation, Update, and Viewing Scenarios Using 1 Form Container Component
Example
Bind a variable to the "Form Scenario" property of the form container, and assign different values to the variable to implement creation, update, and view scenarios.
Configuration Method
- Create a variable of type string named sence

- Bind the form container to a required data model to render and generate form components, then bind the "Form Scenario" property of the form container to the sence variable

- In different business scenarios, assign different values to the sence variable to enable the form container to serve different purposes.
- Assign "create" to the form container to set it as the creation scenario for submitting new data.
- Assign "edit" to the form container to set it as the update scenario for editing and updating existing data.
- Assign "read" to the form container to set it as the view scenario for displaying and viewing existing user data.
Binding Expression
Expressions can be static data or variables. You can connect to built-in data tables and external APIs, etc., via Query, and then bind a query in the expression.

Format Requirements for Method Parameters When Data Source Type is APIs (This feature has been deprecated in the latest version)
When the Form Scenario is "creation", configure
- Add a method: Business-required form fields must be flattened at the root node of input parameters. Example:

- Add a method: Business-required form fields must be flattened at the root node of input parameters. Example:
When the Form Scenario is "update", configure
- Query method: Requires form fields to be flattened at the root node of output parameters. Example:

- Update method: Business-required form fields must be flattened at the root node of input parameters. Example:

- Query method: Requires form fields to be flattened at the root node of output parameters. Example:
When the Form Scenario is "view", configure
- Query method: Requires form fields to be flattened at the root node of output parameters. Example:

- Query method: Requires form fields to be flattened at the root node of output parameters. Example:
Property Introduction
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| Form scenario | formType | string | Default value: "create" |
| Data source | datasourceType | string | Default value: "model" |
| data model | dataSourceName | string | Example: "" |
| Field management | fields | array | |
| data identification (_id) | _id | string | Example: "" |
| Form value | value | object | Auto-fill form input data. Each key is assigned to an input with a matching form data key. |
| Query method | methodGetItem | string | Example: "" |
| Query input parameters | paramGetItem | object | Enter object literals directly, such as {status: 1} Example: {} |
| Add method | methodCreate | string | Example: "" |
| Update method | methodUpdate | string | Example: "" |
| Number of form columns on PC | colNum | string | Default value: "1" |
| PC component width | lgWidth | string | Size configuration only applicable to PC Default value: "hundred" Example: "md" |
| Title position | layout | string | Set the title and input selection region of the current form component in the container to left and right layout or up-down layout Default value: "horizontal" |
Event Introduction
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 |
|---|
| submit | submit | Compatible with all platforms | - | |
| verified successfully | validateSuccess | object
| Compatible with all platforms | - |
| Verification failed | validateFail | object
| Compatible with all platforms | - |
| query is empty | queryEmpty | object
| Compatible with all platforms | - |
| query succeeded | querySuccess | object
| Compatible with all platforms | - |
| Query failed | queryFail | object
| Compatible with all platforms | - |
Property 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 |
|---|
| Whether submission is disabled | isDisabledSubmit | boolean | Whether the form is disabled for submission |
| Form scenario | formType | string | |
| data model | dataSourceName | string | |
| Title position | layout | string | Set the title and input selection region of the current form component in the container to left and right layout or up-down layout |
| Error message. | errors | object | Verification error information of the submission object |
| Data source initial value | remoteValue | object | Data source initialization request initial value |
| Frontend form value | value | object | Frontend form state value |
| data source type information | dataSourceProfile | | Data source information |
| Submit input parameters for the data source method | submitParams | object | Submit parameters to the data source method, no query bind when |
| Clear verification | clearValidate | object | Clear verification |
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 |
|---|
| set value | setValue | object
| 通过 $w.form1.setValue({a:'111'}) 设置组件值 |
| submit | submit | Trigger form submission via $w. | |
| Create and bind policy Query instance Reset instance access password | clearValue | object
| Clear the form with $w. |
| Clear verification | clearValidate | Clear validation with $w. | |
| verification | validate | Trigger form submission via $w. | |
| Disable submission | disableSubmit | Disable form submission via $w. | |
| Enable submission | enableSubmit | Enable form submission via $w. |
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 | form component root element |
| Root element of the PC form | .wd-pc-form | Write styles for PC forms |
| H5 form root element | .wd-h5-form | Write style for H5 form |
| WeChat Mini Program form root element | .wd-mp-form | Can write style for mini program form |
Frequently Asked Questions
When using data container components, must other components be placed inside them?
The Data Container is the core component for page-data interaction, capable of directly querying and displaying data. On our platform, multiple data container components are available, such as ListView, DataView, WdForm, and WdTable.
The Data Container enables deep integration of data and page components. This greatly simplifies data operation processes. In addition to providing data, the Data Container also supports common page interaction features, such as pagination loading, loading status, and error prompts.
When using data containers, if a component relies on data returned by the data container, it is recommended to place the component inside the data container component. For example, to display an image from a specific field in a data detail, it is better to place the component inside the corresponding data container. This way, the data container can automatically handle loading states, loading failures, etc., without needing to worry about rendering timing.
If you only need to use the data container to obtain data without performing UI interactions, you can directly use the Query function to query data.
How to prevent duplicate form submissions?
On the form submit button, create a Boolean variable with a default value of false and bind it to the button's disabled property. When the form container's submit event triggers, perform a "variable assignment" to set this variable to true. Then, in the success branch, call the data source method to submit the data. After successful submission, trigger another "variable assignment" to reset the variable to false. During submission, when the variable value is true, the button remains disabled, thus preventing duplicate submissions.
How do you refresh other components when an event is triggered?
When you need to refresh other components upon an event trigger, bind a variable to the target component's property, for example by referencing this variable in a filter parameter expression. Then change the variable's value in the triggering event to update the corresponding target component's content.