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 creates an object containing the values of all form elements within the target element, and this object updates in real-time to reflect changes in the form elements.
In the example below, we demonstrate how to use the formData method to generate object data bound to form elements:
In this example, we created a form containing text input fields, radio buttons, and text areas, and used the formData method to create an object named data that contains the values of these form elements. We also used the watch method to monitor data changes and display the data on the page in real-time. When the user modifies the value of a form element, the data object updates accordingly, making data processing very simple and efficient.
Reverse Data Binding
The generated object data also has the capability of reverse binding, meaning that when you modify the properties of the object, the values of the related form elements will automatically update as well. This is particularly useful when handling form data, as it allows you to easily achieve two-way data binding.
In the example below, 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 textarea, then generated a data object data using the formData method. Subsequently, by modifying the properties of the data object, we implemented reverse data binding, where the values of form elements automatically update as the object properties change. This two-way data binding functionality makes interacting with form data more convenient.
Listen to a specific form
By default, the formData() method listens to all input, select, and textarea elements within the target element. To listen only to specific form elements, pass a CSS selector.
In the example below, we demonstrate how to listen to specific form elements by passing a CSS selector:
In this example, we only want to listen to form elements whose class is "use-it", so we pass ".use-it" as an argument to the formData() method. Only elements carrying that class will be monitored and included in the resulting data object, which is useful for selectively watching form fields and managing your form data more precisely.
Custom Form
Using custom form components is very simple; you just need to add a value property and set the name attribute to the custom component.
When using a custom form component, simply add it to your form and set the required name attribute. In the example above, we include the <custom-input> element and assign it a name. We then use the formData() method to listen for values from both input elements and custom components, capturing and processing form data in real time. This approach lets you effortlessly extend your form with custom components to meet specific needs.
Using form data within components or pages
Sometimes, you may need to use form data within a component or page, and you must generate and bind the data to the component during the attached lifecycle.
{{logtext}}
Through the attached lifecycle hook, 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.