Get Form Data
After running validateInputs you will most likely want to get the data to end to and endpoint. getFormData will make an object with the same inputs that you passed into validateInputs.
The properties of the object will be the id props that you passed into the input. If you separated any ids with a period, like name.first the property will be nested for you.
Props
inputs array<Input>
The array of inputs you passed into the Form. You'll be calling with function within the onsubmit function of a button in the form
options? Object
Options you can pass to this function. All are optional.
options?.include_hidden_props boolean
Defaults to false. If you want to include hidden inputs in the form data. Hidden inputs are only those that were removed from the DOM using the hidden_if property on the Form
options?.hidden_prop_values any
Defaults to null. If you do want to include hidden inputs in your data (which you normally should not since your backend would normally take care of those cases) you can specify what value you want the input to have.
By default, the value will be null but you can change it to whatever you'd like. If you want to value to be set to whatever value the input currently has (not recommended), you can set this property to "**".
Returns
Promise<Object>
The value of this promise does not matter. If it's successful it doesn't return anything and if it fails it will automatically trigger error states on the appropriate components.
<script>
import { validateInputs, showToast, getFormData } from "bubbles-ui";
const formInputs = [
{
type: "text",
id: "name.first", //the id that will be shown if there is an error
label: "Your First Name",
value: "Jamie",
desc: "You'll be able to change this name later",
error: "A name is required",
validation: "string|required", //the validation requirements that will be run
validate_on_blur: true,
vob: true,
},
{
type: "text",
id: "name.last", //the id that will be shown if there is an error
label: "Your Last Name",
value: "Jones",
desc: "You'll be able to change this name later",
error: "A name is required",
validation: "string|required", //the validation requirements that will be run
validate_on_blur: true,
vob: true,
},
{
type: "number",
id: "favorite_number", //the id that will be shown if there is an error
label: "Your favorite number",
value: 5,
desc: "Pick any number!",
error: "Please select a number",
validation: "numeric|required", //the validation requirements that will be run
validate_on_blur: true,
vob: true,
},
{
type: "submit",
label: "Submit Form",
onsubmit: async (event) => {
try {
//if there are any errors, calling validateInputs will automatically show error states for
//all components that have failed validation
await validateInputs(toastExampleFormInputs); //if any inputs fail validation, the promise will be rejected
const data = await getFormData(toastExampleFormInputs);
//example if you want to include hidden inputs
//Not recommended
//const data = await getFormData(formInputs, { include_hidden_props: true, hidden_prop_values: null });
// {
// name: {
// first: "Jamie",
// last: "Jones"
// }
// favorite_number: 5
// }
} catch (error) {
showToast(error.message);
}
},
},
];
</script>