Handling Forms via Form ActionsEntry 4 of 10

Automatic Reset and Keeping Entered Values

After a form action finishes, React resets the form's uncontrolled fields. To keep what the user typed (for example, after validation errors), return the values from the action and use them as defaultValue.

Notes

The reset comes from passing a function to <form action>, with or without useActionState. Your note credits useActionState; the hook isn't required for it.
It's helpful after success (the form is ready for the next entry) and annoying after a validation error (the user must retype everything).
Fix: return enteredValues from the action, and set each input's defaultValue (or defaultChecked) from formState.enteredValues.
Use defaultValue, not value: value without onChange makes the field read-only.
Optional chaining (formState.enteredValues?.email) handles the initial state, which has no enteredValues.
Multi-selects and checkbox groups: use defaultChecked={formState.enteredValues?.acquisitionChannel.includes('google')}.
Controlled inputs (value + state) aren't reset by React; you manage them yourself.
To reset on demand (for example, outside an action), React 19 provides requestFormReset(formElement) from react-dom.
Security: don't send passwords back into defaultValue in production. The course does it for convenience; real forms leave password fields empty after an error.

What / Why / When

What: Restoring the user's input after a failed submit.
Why: Users shouldn't lose their input because of one invalid field.
When: Every form action that can return validation errors.
Use case: The signup form keeps everything except the passwords.

Code compare

React

<form action={formAction}>  <div className="control">    <label htmlFor="email">Email</label>    <input id="email" type="email" name="email" defaultValue={formState.enteredValues?.email} />  </div>  <div className="control">    <label htmlFor="password">Password</label>    <input id="password" type="password" name="password" />  </div>  <div className="control">    <label htmlFor="role">What best describes your role?</label>    <select id="role" name="role" defaultValue={formState.enteredValues?.role}>      <option value="student">Student</option>      <option value="teacher">Teacher</option>      <option value="employee">Employee</option>    </select>  </div>  <fieldset>    <legend>How did you find us?</legend>    <label>      <input        type="checkbox"        name="acquisition"        value="google"        defaultChecked={formState.enteredValues?.acquisitionChannel.includes("google")}      />      Google    </label>  </fieldset>  <div className="control">    <label htmlFor="terms-and-conditions">      <input        type="checkbox"        id="terms-and-conditions"        name="terms"        defaultChecked={formState.enteredValues?.terms}      />      I agree to the terms and conditions    </label>  </div></form>

The form model keeps its values after submit; nothing resets unless you call reset(). Reset after success only:

Angular

this.signupService.signup(this.form.getRawValue()).subscribe({  next: () => this.form.reset(), // clear only on success  error: () => this.form.controls.passwords.reset(), // keep everything except passwords});

Differences and gotchas

React resets by default and you opt out with defaultValue. Angular keeps values by default and you opt in with reset().
defaultValue only applies when the input mounts or the form resets. Changing formState updates the field because the form reset happens at the same time.
If a field shows an old value after reset, check that it uses defaultValue, not value.

Quick reference

React 19	Angular
Auto reset after `<form action>`	No auto reset
`defaultValue={formState.enteredValues?.email}`	Values stay in `FormGroup`
`defaultChecked` for checkboxes	`formControlName` on a checkbox
`requestFormReset(form)`	`form.reset()`