Dynamic form data binding method

Abstract

The invention particularly relates to a dynamic form data binding method. According to the dynamic form data binding method, the dynamic association between the field and the control is realized through visual configuration, the control type is automatically adapted when the field is changed, and code logic does not need to be manually intervened; a global binding relation matrix is introduced based on graph structure storage, the mapping relation between fields and controls is managed in a centralized mode, and when the fields are added, deleted and modified, a control adaptation and data degradation strategy is automatically triggered; and establishing bidirectional binding of a data model and a control based on a responsive framework, and dynamically generating an API response format in combination with JSON Schema to realize real-time synchronization of field addition, deletion, modification and check. According to the dynamic form data binding method, the data binding code can be automatically generated, so that the code writing workload of a developer is greatly reduced, the project development period is shortened, the business demand change can be quickly responded, real-time data interaction can be realized, and the fluency and convenience of filling the form by a user are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and in particular to a dynamic form data binding method. Background Art

[0002] In many software application scenarios today, forms, as the core interface for users to input data, are of self-evident importance.

[0003] Traditional form data binding methods are often relatively fixed and face many limitations:

[0004] On the one hand, once the form structure is determined, it is extremely inconvenient to adjust it to meet frequently changing business needs, requiring a lot of code modifications and redeployment;

[0005] On the other hand, when data from different sources and in different formats are bound, displayed, or interacted with forms, the compatibility and adaptability are poor, which can easily lead to problems such as data not being displayed correctly or submission failing, greatly affecting the flexibility of the software and user experience.

[0006] In order to solve the technical problems existing in traditional form data binding, such as delayed response to field changes, complex maintenance of composite controls, and low data synchronization efficiency, the present invention proposes a dynamic form data binding method. Summary of the Invention

[0007] In order to overcome the defects of the prior art, the present invention provides a simple and efficient dynamic form data binding method.

[0008] The present invention is achieved through the following technical solutions:

[0009] A dynamic form data binding method, characterized by: dynamically associating fields with controls through visual configuration, dynamically defining field properties through metadata, including field types, validation rules, and control mapping relationships, and automatically adapting control types when fields are changed, without requiring manual intervention in code logic;

[0010] A global binding relationship matrix is ​​introduced based on graph structure storage to centrally manage the mapping relationship between fields and controls, supporting O(1) time complexity relationship query and update, and automatically triggering control adaptation and data degradation strategies when fields are added, deleted, or modified;

[0011] Establish bidirectional binding between data models and controls based on a responsive framework, dynamically generate API response formats using JSON Schema, and achieve real-time synchronization of field additions, deletions, modifications, and queries;

[0012] The dynamic form data binding method of the present invention comprises the following steps:

[0013] Step S1: Load the definition form

[0014] Obtain the form structure definition from the backend server or local configuration file, including form field types, layout, and validation rule information;

[0015] Step S2: Parse form definition

[0016] Parse the acquired form definition data and convert it into a data structure that can be processed internally;

[0017] Step S3: Create a data model

[0018] Generate the corresponding data model based on the parsed form definition to store the value and status of the form fields;

[0019] Step S4: Establishing a binding relationship

[0020] Associate form controls with attributes in the data model to define a two-way binding path for data;

[0021] Step S5: Rendering form controls

[0022] Create and display form controls in the user interface based on the parsed form definition and binding relationships, including but not limited to text boxes and drop-down boxes;

[0023] Step S6: User inputs data

[0024] The user enters data in the form controls;

[0025] Step S7: Update data model

[0026] When the user enters data, the input data is updated to the data model through the binding relationship;

[0027] Step S8: Verify data

[0028] Validate the updated data according to the validation rules in the form definition;

[0029] Step S9: Update the display interface

[0030] When the data model is updated and validation is passed, the display of form controls is updated according to the new data status, including clearing error prompts and updating associated controls;

[0031] Step S10: Submit the form

[0032] Determine whether the user triggers the form submission operation. If the form submission operation is triggered, jump to step S11; otherwise, jump to step S6;

[0033] Step S11: Data submission

[0034] The data in the data model is organized and sent to the back-end server for processing.

[0035] A dynamic form data binding system for implementing the above method, comprising a dynamic data mapping module, a dynamic form rendering and binding module, a data synchronization and update module, and a dynamic verification and extension module;

[0036] The dynamic data mapping module is responsible for dynamically associating fields and controls through visual configuration. It dynamically defines field properties through metadata, including field types, validation rules, and control mapping relationships. This allows for automatic adaptation of control types when fields are changed, without requiring manual intervention in code logic.

[0037] The dynamic data mapping module uses an extensible markup language to define the structure of the form, including the type, attributes, layout of each control in the form and the association relationship information between each control;

[0038] The dynamic data mapping module allows users to customize the static and dynamic characteristics of the description form, providing a basic structure description for subsequent data binding;

[0039] The dynamic data mapping module builds a data model corresponding to the form based on business needs, divides the data into different entities and attributes, and defines the relationship between entities; the data model is a table structure mapping in a relational database, or an object-oriented model representation.

[0040] The dynamic data mapping module is also responsible for organizing and storing the data in the data model in a form suitable for binding, in the form of objects, arrays or custom data structures, so that it can be easily associated with form controls.

[0041] The dynamic form rendering and binding module is responsible for rendering the form in the user interface according to the definition information provided by the form definition module, and realizing the two-way binding between the form fields and the data model;

[0042] When the user enters data in the form field, the data model is automatically updated; conversely, when the data in the data model changes, the form field will also automatically refresh to display the new data;

[0043] The data synchronization and update module is responsible for synchronizing form data between different storage locations and updating the form interface in a timely manner to reflect the latest data status;

[0044] The data synchronization and update module realizes batch data synchronization and update operations by optimizing the data transmission process, adopting intelligent data comparison and update strategies, and making full use of the cache mechanism.

[0045] The dynamic validation and extension module has built-in custom control development specifications and is responsible for customizing the selection of validation condition components through a visual interface based on business scenarios, dragging the selected validation condition components to the corresponding form fields, and setting relevant parameters to form validation rule controls.

[0046] The dynamic validation and extension module supports writing validation rule descriptions directly in form definition files (such as JSON) to allow developers to define precise rules;

[0047] The custom control development specifications include control structure definition, data interaction interface, event triggering mechanism and style customization requirements;

[0048] The validation rule controls formed follow a unified lifecycle management specification to ensure seamless integration with the dynamic form system.

[0049] The dynamic form data binding system of the present invention implements automatic two-way binding between controls and data models based on a responsive framework (such as Vue3) at the front end, and optimizes the rendering performance of massive data by combining virtual scrolling technology;

[0050] The backend dynamically generates the API response format through JSON Schema and supports dynamic field expansion.

[0051] A dynamic form data binding device is characterized by comprising a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the above method steps when executing the computer program.

[0052] A readable storage medium, characterized in that: a computer program is stored on the readable storage medium, and the computer program implements the above method steps when executed by a processor.

[0053] The beneficial effects of the present invention are: the dynamic form data binding method can automatically generate data binding code, which not only greatly reduces the developer's code writing workload, shortens the project development cycle, can quickly respond to changes in business needs, but also can realize real-time data interaction, and improves the fluency and convenience of users filling out forms. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0055] Attachment Figure 1This is a schematic diagram of the dynamic form data binding method of the present invention. DETAILED DESCRIPTION

[0056] In order to enable those skilled in the art to better understand the technical solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the embodiments of the present invention. Obviously, the embodiments described are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work should fall within the scope of protection of the present invention.

[0057] Traditional forms typically use hard-coded or static configuration to bind controls and fields. Changes to field types or rules require manual code modification or item-by-item adjustment of binding logic, resulting in low development efficiency. Furthermore, complex controls such as tables and tree structures require layer-by-layer binding of sub-controls. Changes to dataset fields require traversing the entire form to cancel old bindings, resulting in extremely high maintenance costs. Furthermore, traditional two-way binding relies on event monitoring and checking mechanisms, which can easily lead to performance bottlenecks in complex forms (such as frequent view updates) and lack effective resolution mechanisms for multi-end data conflicts.

[0058] This dynamic form data binding method dynamically associates fields with controls through visual configuration. It dynamically defines field properties, including field types, validation rules, and control mappings, through metadata. This allows for automatic adaptation of control types when fields change (for example, mapping a date field to a date picker), eliminating the need for manual intervention in code logic.

[0059] A global binding relationship matrix is ​​introduced based on graph structure storage to centrally manage the mapping relationship between fields and controls. When fields are added, deleted, or modified, control adaptation and data degradation strategies are automatically triggered (such as filling in default values ​​when fields are missing), eliminating manual traversal operations.

[0060] Based on the responsive framework, a two-way binding between the data model and the control is established. The API response format is dynamically generated in combination with JSON Schema to achieve real-time synchronization of field addition, deletion, modification and query.

[0061] It uses a graph structure to store the binding relationship matrix, supports O(1) time complexity relationship query and update, and automatically triggers control type adaptation and data degradation strategy when the dataset field changes, avoiding the performance loss caused by traditional traversal search.

[0062] The dynamic form data binding method includes the following steps:

[0063] Step S1: Load the definition form

[0064] Obtain the form structure definition from the backend server or local configuration file, including form field types, layout, and validation rule information;

[0065] Step S2: Parse form definition

[0066] Parse the acquired form definition data and convert it into a data structure that can be processed internally;

[0067] Step S3: Create a data model

[0068] Generate the corresponding data model based on the parsed form definition to store the value and status of the form fields;

[0069] Step S4: Establishing a binding relationship

[0070] Associate form controls with attributes in the data model to define a two-way binding path for data;

[0071] Step S5: Rendering form controls

[0072] Create and display form controls in the user interface based on the parsed form definition and binding relationships, including but not limited to text boxes and drop-down boxes;

[0073] Step S6: User inputs data

[0074] The user enters data in the form controls;

[0075] Step S7: Update data model

[0076] When the user enters data, the input data is updated to the data model through the binding relationship;

[0077] Step S8: Verify data

[0078] Validate the updated data according to the validation rules in the form definition;

[0079] Step S9: Update the display interface

[0080] When the data model is updated and validation is passed, the display of form controls is updated according to the new data status, including clearing error prompts and updating associated controls;

[0081] Step S10: Submit the form

[0082] Determine whether the user triggers the form submission operation. If the form submission operation is triggered, jump to step S11; otherwise, jump to step S6;

[0083] Step S11: Data submission

[0084] The data in the data model is organized and sent to the back-end server for processing.

[0085] The dynamic form data binding system is used to implement the above method, including a dynamic data mapping module, a dynamic form rendering and binding module, a data synchronization and update module and a dynamic verification and expansion module;

[0086] The dynamic data mapping module is responsible for dynamically associating fields with controls through visual configuration. It dynamically defines field properties through metadata, including field types, validation rules, and control mapping relationships. This allows automatic adaptation of control types when fields are changed (for example, mapping a date field to a date picker), without requiring manual intervention in code logic.

[0087] The dynamic data mapping module uses an extensible markup language (such as JSON) to define the structure of the form, including the type, attributes, layout of each control in the form and the relationship information between each control;

[0088] The dynamic data mapping module allows users to customize the static and dynamic characteristics of the form in a flexible way, such as the initial state of the control, data validation rules, dependencies, etc., providing a basic structure description for subsequent data binding;

[0089] The dynamic data mapping module builds a data model corresponding to the form based on business needs, divides the data into different entities and attributes, and defines the relationship between entities; the data model is a table structure mapping in a relational database, or an object-oriented model representation.

[0090] The dynamic data mapping module is also responsible for organizing and storing the data in the data model in a form suitable for binding, in the form of objects, arrays or custom data structures, so that it can be easily associated with form controls.

[0091] The dynamic form rendering and binding module is responsible for rendering the form in the user interface according to the definition information provided by the form definition module, and realizing the two-way binding between the form fields and the data model;

[0092] The rendering process involves creating HTML elements, setting element styles, and layout operations. The dynamic form rendering and binding module can adapt to different front-end frameworks (such as Vue) and device types (desktop, mobile, etc.), ensuring that the form can be displayed correctly in various environments.

[0093] When the user enters data in the form field, the data model is automatically updated; conversely, when the data in the data model changes (such as obtaining new data from the server), the form field will automatically refresh and display the new data; this two-way binding mechanism can ensure data consistency and real-time performance.

[0094] The data synchronization and update module is responsible for quickly and accurately synchronizing form data between different storage locations (such as front-end memory, back-end database, local cache, etc.) and updating the form interface in a timely manner to reflect the latest data status;

[0095] The data synchronization and update module is a key component in the dynamic form system. By optimizing the data transmission process, adopting intelligent data comparison and update strategies, and making full use of the cache mechanism, it achieves high-performance batch data synchronization and update operations, providing users with a highly smooth and real-time data interaction experience.

[0096] The dynamic validation and extension module has built-in custom control development specifications and is responsible for customizing the selection of validation condition components through a visual interface based on business scenarios, dragging the selected validation condition components to the corresponding form fields, and setting relevant parameters to form validation rule controls.

[0097] For example, for an ID card number field, you can select the "Format Verification" component through the visual configuration interface and specify the regular expression pattern of the ID card number to decrypt the ID card information.

[0098] The dynamic validation and extension module supports writing validation rule descriptions directly in form definition files (such as JSON) to allow developers to define precise rules;

[0099] The custom control development specifications include control structure definition, data interaction interface, event triggering mechanism and style customization requirements;

[0100] The formed validation rule control follows a unified lifecycle management specification to ensure that it can be seamlessly integrated with other components in the dynamic form system (such as rendering module, data binding module, validation module, etc.).

[0101] The dynamic form data binding system uses a responsive framework (such as Vue3) to implement automatic two-way binding between controls and data models, and combines virtual scrolling technology to optimize the rendering performance of massive data.

[0102] The backend dynamically generates the API response format through JSON Schema and supports dynamic field expansion.

[0103] The dynamic form data binding device includes a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the above method steps when executing the computer program.

[0104] The readable storage medium stores a computer program, which implements the above method steps when executed by a processor.

[0105] Traditional form data processing methods require developers to manually write a large amount of code to implement operations such as associating data with form elements, data validation and updating.

[0106] Compared to existing technologies, this dynamic form data binding method automatically generates data binding code through an automated mechanism, significantly reducing the coding workload for developers. Due to the reduced code and automated data binding process, development teams can complete form-related feature development more quickly, shortening project development cycles and accelerating product development. For applications that require rapid iteration, during product updates, this dynamic form data binding method can help development teams quickly respond to changing business needs, introducing new form features or optimizing existing forms.

[0107] Dynamic data binding enables real-time data interaction when filling out forms. When entering data or modifying options in a form, the system can immediately process it based on the bound data model, validating the correct formatting and dynamically updating the associated form elements. This real-time feedback improves the fluidity and convenience of form filling.

[0108] The embodiment described above is only one specific implementation of the present invention. Common changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included in the protection scope of the present invention.

Claims

1. A dynamic form data binding method, characterized by: Dynamically associate fields and controls through visual configuration. Dynamically define field properties through metadata, including field types, validation rules, and control mapping relationships. Automatically adapt control types when fields are changed, eliminating the need for manual intervention in code logic. A global binding relationship matrix is ​​introduced based on graph structure storage to centrally manage the mapping relationship between fields and controls, supporting O(1) time complexity relationship query and update, and automatically triggering control adaptation and data degradation strategies when fields are added, deleted, or modified; Based on the responsive framework, a two-way binding between the data model and the control is established. The API response format is dynamically generated in combination with JSON Schema to achieve real-time synchronization of field addition, deletion, modification and query.

2. The dynamic form data binding method according to claim 1, wherein: The following steps are involved: Step S1: Load the definition form Obtain the form structure definition from the backend server or local configuration file, including form field types, layout, and validation rule information; Step S2: Parse form definition Parse the acquired form definition data and convert it into a data structure that can be processed internally; Step S3: Create a data model Generate the corresponding data model based on the parsed form definition to store the value and status of the form fields; Step S4: Establishing a binding relationship Associate form controls with attributes in the data model to define a two-way binding path for data; Step S5: Rendering form controls Create and display form controls in the user interface based on the parsed form definition and binding relationships, including but not limited to text boxes and drop-down boxes; Step S6: User inputs data The user enters data in the form controls; Step S7: Update data model When the user enters data, the input data is updated to the data model through the binding relationship; Step S8: Verify data Validate the updated data according to the validation rules in the form definition; Step S9: Update the display interface When the data model is updated and validation is passed, the display of form controls is updated according to the new data status, including clearing error prompts and updating associated controls; Step S10: Submit the form Determine whether the user triggers the form submission operation. If the form submission operation is triggered, jump to step S11; otherwise, jump to step S6; Step S11: Data submission The data in the data model is organized and sent to the back-end server for processing.

3. A dynamic form data binding system, characterized by: Used to implement the method of claim 1 or 2, comprising a dynamic data mapping module, a dynamic form rendering and binding module, a data synchronization and update module and a dynamic verification and extension module; The dynamic data mapping module is responsible for dynamically associating fields and controls through visual configuration. It dynamically defines field properties through metadata, including field types, validation rules, and control mapping relationships. This allows for automatic adaptation of control types when fields are changed, without requiring manual intervention in code logic. The dynamic form rendering and binding module is responsible for rendering the form in the user interface according to the definition information provided by the form definition module, and realizing the two-way binding between the form fields and the data model; When the user enters data in the form field, the data model is automatically updated; conversely, when the data in the data model changes, the form field will also automatically refresh to display the new data; The data synchronization and update module is responsible for synchronizing form data between different storage locations and updating the form interface in a timely manner to reflect the latest data status; The dynamic validation and extension module has built-in custom control development specifications and is responsible for customizing the selection of validation condition components through a visual interface based on business scenarios, dragging the selected validation condition components to the corresponding form fields, and setting relevant parameters to form validation rule controls.

4. The dynamic form data binding system according to claim 3, characterized in that: The dynamic data mapping module uses an extensible markup language to define the structure of the form, including the type, attributes, layout of each control in the form and the association relationship information between each control; The dynamic data mapping module allows users to customize the static and dynamic characteristics of the description form, providing a basic structure description for subsequent data binding; The dynamic data mapping module builds a data model corresponding to the form based on business needs, divides the data into different entities and attributes, and defines the relationship between entities; the data model is a table structure mapping in a relational database, or an object-oriented model representation.

5. The dynamic form data binding system according to claim 4, characterized in that: The dynamic data mapping module is also responsible for organizing and storing the data in the data model in the form of objects, arrays or bindings of custom data structures so that they can be easily associated with form controls.

6. The dynamic form data binding system according to claim 3, characterized in that: The data synchronization and update module optimizes the data transmission process, adopts intelligent data comparison and update strategies, and makes full use of cache mechanism means to achieve batch data synchronization and update operations.

7. The dynamic form data binding system according to claim 3, characterized in that: The dynamic validation and extension module supports writing validation rule descriptions directly in the form definition file, so that developers can define rules; The custom control development specifications include control structure definition, data interaction interface, event triggering mechanism and style customization requirements; The validation rule controls formed follow a unified lifecycle management specification to ensure seamless integration with the dynamic form system.

8. The dynamic form data binding system according to any one of claims 3 to 7, characterized in that: The front-end implements automatic two-way binding between controls and data models based on a responsive framework, and combines virtual scrolling technology to optimize the rendering performance of massive data. The backend dynamically generates the API response format through JSON Schema and supports dynamic field expansion.

9. A dynamic form data binding device, characterized by: The method comprises a memory and a processor; the memory is used to store a computer program, and the processor is used to implement the method steps as claimed in claim 1 or 2 when executing the computer program.

10. A readable storage medium, characterized in that: The readable storage medium stores a computer program, which implements the method steps according to claim 1 or 2 when executed by a processor.

Images