How do you reset a form in Angular?

Use the reset() method on a FormGroup (reactive forms) or resetForm() on NgForm (template-driven) to clear values and validation states.

Does reset() remove validation errors in Angular forms?

Yes, calling reset() clears all validation states and marks the form as pristine and untouched.

How to Reset a Form in Angular | FullStackPrep.Dev

💡 Concept Name

Resetting Forms – In Angular, you can reset forms to their initial or custom state using reset() on FormGroup (reactive) or NgForm (template-driven).

📘 Quick Intro

Forms may need to be reset after a successful submission or upon user interaction. Angular provides a built-in reset() method to clear all values, states, and validation markers.

🧠 Analogy / Short Story

Resetting a form is like pressing “Clear” on a calculator – it wipes out everything and gives you a clean slate for fresh input.

🔧 Technical Explanation

🧼 form.reset() clears all values and validation states.
⚙️ form.reset({ ... }) sets new initial values during reset.
🧪 Useful in reactive and template-driven forms alike.
📦 Resets touched, dirty, pristine, and validation status.
🔄 Automatically disables fields that were initially disabled.

🎯 Purpose & Use Case

✅ Clear the form after a successful submission.
✅ Provide a reset button for user convenience.
✅ Set a fresh state for the next form entry.

💻 Real Code Example

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

                    @Component({
                        selector: 'app-root',
  templateUrl: './app.component.html'
                        })
export class AppComponent {
  form = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

  resetForm() {
    this.form.reset(); // or this.form.reset({ name: '', email: '' });
  }
}

<form [formGroup]="form">
  <input formControlName="name" placeholder="Name">
  <input formControlName="email" placeholder="Email">
  <button type="button" (click)="resetForm()">Reset</button>
</form>

❓ Interview Q&A

Q1: How do you reset a reactive form?
A: Use the form.reset() method on a FormGroup instance.

Q2: Can you set values while resetting?
A: Yes, pass an object with values to reset().

Q3: What happens to touched/dirty states on reset?
A: They’re cleared (marked as untouched and pristine).

Q4: Does reset clear validation errors?
A: Yes, it resets the status as well.

Q5: How do you reset a template-driven form?
A: Use form.resetForm() on the NgForm reference.

📝 MCQs

Q1. Which method resets a form in Angular?

form.clear()
form.reset()
form.delete()
form.empty()

Q2. Does reset clear validations?

No
Yes
Only for errors
Only warnings

Q3. How do you reset a template-driven form?

form.clearForm()
form.resetForm()
form.flush()
form.reInit()

Q4. What does reset() change?

Only values
Only errors
Values and state
Only touched flag

Q5. Can you pass values to reset()?

No
Yes
Only strings
Only nulls

Q6. What happens to pristine/dirty state after reset?

No effect
Reset to pristine
Becomes touched
Marked invalid

Q7. Is reset() available in FormControl?

No
Yes
Only FormGroup
Only NgModel

Q8. When would you typically use reset()?

After styling
When error occurs
After form submission
During rendering

Q9. Does reset disable controls?

Yes
No
Sometimes
Resets to initial state

Q10. What happens to disabled fields after reset?

They become enabled
They remain disabled
They are removed
They reset to null

💡 Bonus Insight

Resetting is especially useful in multi-step forms where you want to clear user progress or start over. Always ensure your UI and business logic align with form resets.

📄 PDF Download

Need a handy summary for your notes? Download this topic as a PDF!

📄 PDF Download Coming Soon

How to Reset a Form in Angular