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
options	object	yes

options Properties

Name	Type	Required	Default	Description
formContext	FormContext			The form context object.
instanceObject	ObjectInstance			The object instance.
props	object			The props object.

Returns

ObjectFormInstance

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:337`