Feat: Add default values to form component

[TimKunze96]

Add defaultValues prop to Form component

Problem

The current implementation of the Form component does not seem to provide a simple way to provide default values, which makes it unsuitable for any forms that involve existing data.

Solution

This PR adds a new defaultValues property to the Form component. It utilizes the existing reset implementation and basically overrides the default values within the FormData object.

<Form
  action="/users/123"
  method="put"
  defaultValues={{
    name: 'John Doe',
    email: '[email protected]',
    role: 'admin',
    newsletter: true,
    preferences: 'option2'
  }}
>
  {/* form fields */}
</Form>

Implementation

On component mount, the form captures the current HTML form state and then applies any defaultValues overrides. Boolean true values are stored as 'on' in the FormData to match HTML form behavior. The existing reset mechanism uses the populated default data to restore form state.

[hettiger]

Indeed, there's no documented way. I've ended up with something like this:

<script setup lang="ts">
import {Form} from '@inertiajs/vue3'
import Button from "../../Components/Button.vue";
import type {Repository} from "../../entities.ts";
import {reactive} from "vue";

interface Props {
    action: string;
    method: 'post' | 'put';
    repository?: Repository;
}

const { repository } = defineProps<Props>()

const defaultValues = reactive({
    name: repository?.name ?? '',
});
</script>

<template>
    <Form
        :action="action"
        :method="method"
        #default="{ errors, processing, reset }"
        class="flex flex-col gap-4"
    >
        <div class="flex flex-col gap-2">
            <label for="name">
                Name
                <span class="text-red-500">*</span>
            </label>
            <input
                type="text"
                name="name"
                v-model="defaultValues.name"
                class="border border-gray-300 rounded-md p-2"
            />
            <div
                v-if="errors.name"
                class="text-red-500 text-xs"
            >
                {{ errors.name }}
            </div>
        </div>
        <p>
            Fields marked with <span class="text-red-500">*</span> are required.
        </p>
        <Button theme="danger" variant="outline" type="button" @click="reset()">Reset</Button>
        <Button type="submit" :disabled="processing">
            {{ processing
                ? (method === 'post' ? 'Creating...' : 'Updating...')
                : (method === 'post' ? 'Create Repository' : 'Update Repository')
            }}
        </Button>
    </Form>
</template>

See defaultValues and v-model="defaultValues.name" on the input.

I'd prefer the approach in the proposed solution. An alternative would be providing a best practice example in the docs.