Handling Forms via Form ActionsEntry 9 of 10

Choosing Between Actions and `onSubmit`

React 19 offers two submission styles: form actions (uncontrolled, FormData) and onSubmit handlers (often with controlled state).

Notes

Need	Form actions	`onSubmit` + state
Read values only on submit	✅	✅
Live validation while typing	❌	✅
Pending state without extra state	✅ `isPending` / `useFormStatus`	❌ Manual
Optimistic UI	✅ `useOptimistic`	🟡 Manual
Values kept after submit	🟡 `defaultValue` from returned state	✅ Already in state
Works with Next.js Server Actions	✅	❌
Works before JavaScript loads (with Server Components)	✅	❌

Combine them when needed: live validation with controlled inputs, submission through a form action.
Form actions fit the React 19 / Next.js direction. onSubmit remains fine for client-only forms with rich interaction.
React Router has its own <Form> and route action (React Router, Entry 15). Both approaches run code on submit with FormData, but React Router's action belongs to a route and revalidates loaders afterwards; a React 19 form action belongs to a component.

Angular

Angular has one submission model ((ngSubmit) + Reactive Forms + a service), which covers both columns: values are live, and pending/optimistic state is built with signals. Angular 21's experimental Signal Forms add built-in submission handling, but Reactive Forms remain the stable choice.

Quick reference

Scenario	React 19	Angular
Simple submit-and-show-result	`useActionState`	Signals + service
Live validation	Controlled inputs	Reactive Forms (built in)
Shared submit button	`useFormStatus`	`pending` input
Instant feedback	`useOptimistic`	Signal update + rollback
Route-level form	React Router `action`	Component + `Router.navigate()`