Working with Forms & User InputEntry 5 of 10

Resetting Forms

Returning every field to its starting value after submission or on request.

Notes

Three ways, depending on how the form is built:

Form type	Reset with
Uncontrolled (refs, `FormData`)	`<button type="reset">` or `form.reset()`
Controlled (state)	Set the state back to the initial object
React 19 form action (`<form action={fn}>`)	Automatic after the action succeeds (next topic)

form.reset() restores each field's default value (defaultValue), not necessarily an empty string.
For a controlled form, form.reset() and type="reset" don't work: React re-applies the state value on the next render. Reset the state instead.
Call reset() on the form element: event.currentTarget.reset() inside onSubmit.

What / Why / When

What: Clearing the form.
Why: Ready for the next entry, and no stale values left behind.
When: After a successful submit, or when the user clicks Reset.
Use case: Clearing the signup form after sending it.

Code compare

React

// Uncontrolled: reset the DOM formfunction handleSubmit(event: FormEvent<HTMLFormElement>) {  event.preventDefault();  const fd = new FormData(event.currentTarget);  console.log(Object.fromEntries(fd.entries()));  event.currentTarget.reset();}<button type="reset">Reset</button>;

React

// Controlled: reset the stateconst [values, setValues] = useState(INITIAL_VALUES);function handleReset() {  setValues(INITIAL_VALUES);}<button type="button" onClick={handleReset}>  Reset</button>;

Angular

this.form.reset(); // back to initial values (with nonNullable)this.form.reset({ email: "saved@example.com" }); // or to specific values

<button type="reset"> also works inside a [formGroup] form: Angular listens for the reset event and calls form.reset().

Differences and gotchas

Without nonNullable: true, Angular's reset() sets controls to null, not ''.
reset() also clears touched and dirty in Angular, so validation messages disappear. In React, reset your own didEdit/touched state too (Entry 8).

Quick reference

React	Angular
`event.currentTarget.reset()`	`this.form.reset()`
`setValues(INITIAL_VALUES)`	`this.form.reset()`
`<button type="reset">` (uncontrolled only)	`<button type="reset">`