Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support nested paths in form error types #2081

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

talelmishali
Copy link

This PR adds TypeScript support for handling nested form errors in the React and Vue packages on Form Helper (useForm)

Problem

Currently, when dealing with nested form objects, TypeScript doesn't provide proper type safety for error paths. For example:

interface CustomerForm {
    contact: {
        email: string;
    }
}

// Currently throws TS error even though Laravel returns "contact.email"
form.errors['contact.email']

Changes

@inertiajs/react

  • Added FormDataKeys utility type for nested path support
  • Updated error types to handle nested paths
  • Modified error handling methods to support nested paths

@inertiajs/vue

  • Added FormDataKeys utility type for nested path support
  • Updated error types to handle nested paths
  • Modified error handling methods to support nested paths

Example Usage

interface CustomerForm {
    name: string;
    contact: {
        email: string;
        phone: {
            home: string;
        }
    }
}

const form = useForm<CustomerForm>({...});

// Now TypeScript properly supports:
form.errors['contact.email']       // ✓ Valid
form.errors['contact.phone.home']  // ✓ Valid
form.errors['invalid.path']        // ✗ Type Error

@talelmishali talelmishali marked this pull request as ready for review November 7, 2024 17:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant