formData
The formData method is used to generate object data bound to form elements, making it simpler and more efficient to handle form elements. This method generates an object that contains the values of all form elements within the target element, and the object reflects changes to the form elements in real time.
In the following example, we demonstrate how to use the formData method to generate object data bound to form elements:
In this example, we created a form containing a text input, radio buttons, and a text area, and used the formData method to create an object data that includes the values of these form elements. We also used the watch method to monitor changes in the data and display the data in real-time on the page. When the user modifies the values of form elements, the data object updates accordingly, making data processing very simple and efficient.
Reverse Data Binding
The generated object data also has reverse binding capability, which means that when you modify an object's properties, the corresponding form element values will automatically update. This is very useful when processing form data, as you can easily achieve two-way data binding.
In the following example, we demonstrate how to use the object data generated by the formData method, and how to perform reverse data binding:
In this example, we first created a form containing a text input, radio buttons, and a text area, then used the formData method to generate a data object data. Subsequently, by modifying the properties of the data object, we achieved reverse data binding, meaning that the values of the form elements automatically update as the object's properties change. This two-way data binding feature makes interaction with form data more convenient.
Monitor specific forms
By default, the formData() method listens to all input, select, and textarea elements within the target element. However, if you only want to listen to specific form elements, you can achieve this by passing a CSS selector.
In the following example, we demonstrate how to listen to specific form elements by passing CSS selectors:
In this example, we only want to listen to form elements with a class of "use-it", so we passed ".use-it" as a parameter to the formData() method. In this way, only form elements with that class name will be listened to and included in the generated data object. This is useful for selectively listening to form elements to manage your form data more precisely.
Custom Form
The use of custom form components is very simple, just add a value attribute to the custom component and set the name feature.
When using custom form components, you only need to add them to your form and set the required name attribute. In the example above, we use a custom form component by adding a <custom-input> element and setting the name attribute. Subsequently, we use the formData() method to listen to the values of input elements and custom components, so as to obtain and process form data in real time. This approach allows you to easily extend your form to include custom form components, thereby meeting your specific needs.
Using Form Data within Components or Pages
Sometimes, you may need to use form data within a component or page, and you need to generate the data during the attached lifecycle cycle and bind it to the component.
{{logtext}}
Through the attached lifecycle, after the component is ready, we use the this.shadow.formData() method to generate the form data object fdata.
formData() is more suitable for form scenarios with relatively simple interaction logic.