export type ProductFormData = {
  name: string
  sku: string
  price: string
  is_active: boolean
  image: File | null
  remove_image: boolean
}

const form = useForm<ProductFormData>('CreateProduct', {
  name: '',
  sku: '',
  price: '',
  is_active: true,
  image: null,
  remove_image: false,
})

const form = useForm<ProductFormData>(`EditProduct:${product.id}`, {
  name: product.name,
  sku: product.sku,
  price: String(product.price),
  is_active: product.is_active,
  image: null,
  remove_image: false,
})

edit Product #42
  ↓ nhập dở
click sang page khác
  ↓
browser Back
  ↓
EditProduct:42 được restore

function update<K extends keyof ProductFormData>(
  key: K,
  value: ProductFormData[K],
) {
  form.setData(key, value)
  form.clearErrors(key)
}

function submit() {
  form
    .transform((data) => ({
      ...data,
      price: Number(data.price),
    }))
    .post('/products', {
      preserveScroll: 'errors',
    })
}

<button
  type="submit"
  disabled={form.processing || !form.isDirty}
>
  {form.processing ? 'Đang lưu…' : 'Lưu thay đổi'}
</button>

<fieldset disabled={form.processing}>
  ...
</fieldset>

<input
  id="sku"
  value={form.data.sku}
  aria-invalid={Boolean(form.errors.sku)}
  onChange={(event) => update('sku', event.target.value)}
/>

{form.errors.sku && (
  <p role="alert" className="text-sm text-red-600">
    {form.errors.sku}
  </p>
)}

{form.isDirty && (
  <span className="text-sm text-amber-700">
    Có thay đổi chưa lưu
  </span>
)}

{form.processing && (
  <button type="button" onClick={() => form.cancel()}>
    Hủy request
  </button>
)}

{form.recentlySuccessful && (
  <span className="text-sm text-green-700">Đã lưu</span>
)}

<ProductForm
  form={form}
  submitLabel="Tạo sản phẩm"
  onSubmit={submit}
/>

examples/product-crud/frontend/components/ProductForm.tsx
examples/product-crud/frontend/pages/Products/Create.tsx
examples/product-crud/frontend/pages/Products/Edit.tsx