How to Reset a Form in Angular
💡 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!