How to Reset Form in Angular: Simple Methods Explained

In Angular, you can reset a form by calling the reset() method on the form object. For template-driven forms, use form.reset() in your component, and for reactive forms, call formGroup.reset() to clear values and reset validation states.

Syntax

The reset() method is used to clear the form's values and reset its validation state.

• Template-driven form: Call form.reset() where form is a reference to your form.
• Reactive form: Call formGroup.reset() where formGroup is your FormGroup instance.

typescript

form.reset();

// or for reactive forms
formGroup.reset();

Example

This example shows a reactive form with two fields and a reset button that clears the form and resets validation.

typescript

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reset-form',
  template: `
    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
      <label for="firstName">First Name:</label>
      <input id="firstName" formControlName="firstName" />
      <div *ngIf="profileForm.get('firstName')?.invalid && profileForm.get('firstName')?.touched">
        First Name is required.
      </div>

      <label for="lastName">Last Name:</label>
      <input id="lastName" formControlName="lastName" />
      <div *ngIf="profileForm.get('lastName')?.invalid && profileForm.get('lastName')?.touched">
        Last Name is required.
      </div>

      <button type="submit" [disabled]="profileForm.invalid">Submit</button>
      <button type="button" (click)="onReset()">Reset</button>
    </form>
  `
})
export class ResetFormComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.profileForm.valid) {
      alert('Form Submitted: ' + JSON.stringify(this.profileForm.value));
    }
  }

  onReset() {
    this.profileForm.reset();
  }
}

Output

A form with two input fields and two buttons: Submit (disabled until valid) and Reset (clears inputs and validation).

Common Pitfalls

Common mistakes when resetting forms in Angular include:

• Not calling reset() on the correct form object (template form vs reactive form).
• Expecting reset() to set default values without passing them explicitly.
• Not resetting validation states, which reset() does automatically.

To reset with default values, pass an object to reset() like formGroup.reset({ firstName: 'John' }).

typescript

// Wrong: calling reset on a form control instead of form group
this.profileForm.get('firstName').reset(); // Only resets one control

// Right: reset entire form
this.profileForm.reset();

// Reset with default values
this.profileForm.reset({ firstName: 'John', lastName: 'Doe' });

Quick Reference

• Template-driven form: Use form.reset() to clear values and validation.
• Reactive form: Use formGroup.reset() to reset all controls.
• Pass an object to reset() to set default values.
• Resetting clears validation states and marks controls as pristine and untouched.

Key Takeaways

Use the reset() method on your form or form group to clear values and validation.

For reactive forms, call formGroup.reset(); for template-driven forms, call form.reset().

Pass default values to reset() if you want to set initial values after reset.

Resetting marks the form as pristine and untouched, clearing validation errors.

Avoid resetting individual controls when you want to reset the whole form.