Skip to content

Conversation

@impruthvi
Copy link
Contributor

This PR refactors form data handling across authentication and profile components by introducing the Partial type. This improves flexibility when dealing with optional fields, ensuring better type safety and reducing unnecessary type constraints.

Changes

  • Updated useForm hooks in authentication-related components (login, register, reset-password, etc.) to use Partial<T>.
  • Applied the same change to the profile settings component for better consistency.
  • Ensured type definitions remain clear while allowing partial updates to form data.

@impruthvi
Copy link
Contributor Author

  • Replaced Partial<T> with Required<T> in useForm across multiple auth and profile forms.
  • Ensures all required fields are always present, improving type safety and preventing missing data issues. 🚀

@taylorotwell
Copy link
Member

I am closing this pull request because it lacks sufficient explanation, tests, or both. It is difficult for us to merge pull requests without these things because the change may introduce breaking changes to the framework.

Feel free to re-submit your change with a thorough explanation of the feature and tests - integration tests are preferred over unit tests. Please include it's benefit to end users; the reasons it does not break any existing features; how it makes building web applications easier, etc.

Thanks!

@impruthvi
Copy link
Contributor Author

Ensure Consistent and Type-Safe Form Handling in useForm

Problem & Error Details

Without Required<T>, the useForm hook does not enforce all fields, leading to potential issues:

1. TypeScript Error (TS2344 - Index Signature Missing)

When using useForm<LoginForm>, TypeScript throws the following error because LoginForm does not satisfy the expected constraint:

{
  "resource": "/home/impruthvi/projects/react-starter-kit/resources/js/pages/auth/login.tsx",
  "owner": "typescript",
  "code": "2344",
  "severity": 8,
  "message": "Type 'LoginForm' does not satisfy the constraint 'FormDataType'.\n  Index signature for type 'string' is missing in type 'LoginForm'."
}

2. Inconsistent Response Structure

When initializing useForm<LoginForm> without defining all fields:

const { data, setData, post, processing, errors, reset } = useForm<LoginForm>({
    email: '',
    password: '',
});

Setting form data without the remember field results in:

{ "email": "[email protected]", "password": "test@123" }

Since remember is missing, different requests may have different field structures, making API handling unpredictable.

Solution: Enforce Required Fields

By using Required<T>, we enforce all fields:

const { data, setData, post, processing, errors, reset } = useForm<Required<LoginForm>>({
    email: '',
    password: '',
});

This results in a TypeScript error (TS2769) because remember is required but missing:

{
  "code": "2769",
  "message": "Property 'remember' is missing in type '{ email: string; password: string; }' but required in type 'Required<LoginForm>'."
}

To fix this, we define all fields explicitly:

const { data, setData, post, processing, errors, reset } = useForm<Required<LoginForm>>({
    email: '',
    password: '',
    remember: false, // Ensures a complete and consistent structure
});

Benefits of This Change

Prevents Missing Fields – Ensures all required fields are always present.
Eliminates Undefined Errors – Avoids runtime issues caused by missing fields.
Ensures API Consistency – Backend receives structured, predictable data.
Improves Type Safety – TypeScript strictly enforces required fields, preventing accidental omissions.

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.

2 participants