createForm()
Async Data

Concepts

HTML forms can be used to save or update values. When updating, it's necessary to fetch the data from the server and update the client-side form state. With the loadData function, we can fetch the data from the server and update the form state.

Loading data from server

When editing a form, we load the form data from the server asynchronously. The best way to do that is by using the loadData function. This function can receive parameters. The following example shows how to load data from the server and update the form state.

For TypeScript users, it's necessary to type the form. This can be done by using the CreateForm type definition.

type Form = CreateForm<
  {
    email: string;
    password: string;
    options: string;
  },
  string
>;

Example

import { createForm } from "@createform/react";
 
const form = createForm({
    initialValues: {
        name: "",
        email: "",
        phone: "",
    },
    loadData: async (id) => {
        return await fetch(
            `https://jsonplaceholder.typicode.com/users/${id}`)
    }
})
 
const FormExample = () => {
 
    const { register, handleSubmit, formState } = form();
 
    return (...)
}

Reloading data from server

Usually, when updating data, the application should be redirected to another page. However, in specific cases, you can reload the data to display the new data by using the reloadData function.

import { createForm } from "@createform/react";
 
const form = createForm({
    initialValues: {
        name: "",
        email: "",
        phone: "",
    },
    loadData: async (id) => {
        return await fetch(
            `https://jsonplaceholder.typicode.com/users/${id}`)
    },
})
 
const FormExample = () => {
    cont {reloadData} = form();
}

You can also use setFieldsValue, but we recommend using loadData instead.

Native HTML elementsForm submission