---
url: "https://vueda.dev/v3/reference/api/js/use/useObjectForm/functions/useObjectForm.md"
title: "useObjectForm"
---

# useObjectForm

## Overview

This composition function bridges the gap between the generic FormContext (useForm) and data handling ObjectInstance
 (useObject, useObjectInstance). It provides a submit function that handles the form submission, and the state of the
 form. The objectForm is `loading` when the form is submitting, `instanceObject.state.loading` is not tied in.
 The form will warn the user if they have unsaved changes when they try to navigate away from the page.
 The form will also display a toast message when the form is successfully submitted or when an error occurs.

## Signature

`useObjectForm(options)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-options">options</span> | `object` | yes |  |

#### options Properties

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="param-options-formContext">formContext</span> | `FormContext` |  |  | The form context object. |
| <span id="param-options-instanceObject">instanceObject</span> | `ObjectInstance` |  |  | The object instance. |
| <span id="param-options-props">props</span> | `object` |  |  | The props object. |

### Returns

[ObjectFormInstance](/v3/reference/api/js/use/useObjectForm/types/ObjectFormInstance.md)

The object form instance.

## Examples

```
```vue
<script setup>
import { useObjectInstance } from '@arrai-innovations/reactive-helpers';
import FormConfirmDialog from '@vueda/form/confirm/FormConfirmDialog.vue';
import { useForm } from '@vueda/use/useForm.js';
import { useObjectForm } from '@vueda/use/useObjectForm.js';
import { reactive } from 'vue';

// Component props
const props = defineProps({
  app: String,
  model: String,
});

// Setup form context with initial values
const formContext = useForm(reactive({ initialValues: { name: '', age: 0 } }));

// Object instance for CRUD operations
const instanceObject = useObjectInstance({
  props: reactive({ id: '123', app: props.app, model: props.model }),
  handlers: {
      // CRUD handlers
  }
});

// Object form handling
const objectForm = useObjectForm({ props, formContext, instanceObject });
</script>
<template>
  <form @submit.prevent="objectForm.submit">
    <input v-model="formContext.state.values.name" placeholder="Name" />
    <input v-model="formContext.state.values.age" placeholder="Age" type="number" />
    <button type="submit" :disabled="objectForm.state.loading || !formContext.state.anyModified">Submit</button>
  </form>
  <p v-if="objectForm.state.loading">Loading...</p>
  <p v-if="objectForm.state.error">{{ objectForm.state.error.message }}</p>
  <!-- Required: resolves submit-time warning confirmations (HTTP 409); without it warned saves are cancelled. -->
  <FormConfirmDialog :controller="objectForm.confirmation" />
</template>
```

You should refer to vueda's useForm example and reactive-helper's useObject/useObjectInstance examples for more
 detail on those individual parts.
```

## Source

`client/lib/use/useObjectForm.js:349`