How to reset forms in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Resetting Angular forms clears form values, validation states, and restores forms to their pristine initial state for better user experience.
As the creator of CoreUI with over 11 years of Angular development experience, I’ve implemented form reset functionality in countless data entry applications and user interfaces.
From my expertise, the most effective approach is using the reset() method on reactive forms, optionally providing new default values for form controls.
This pattern ensures clean form state management and provides users with clear ways to start over or cancel their input.
Use the reset() method on reactive forms to clear values and restore the form to its initial pristine state.
export class UserFormComponent {
userForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
age: [null, [Validators.required, Validators.min(18)]]
})
constructor(private fb: FormBuilder) {}
resetForm() {
this.userForm.reset()
}
resetWithDefaults() {
this.userForm.reset({
name: '',
email: '',
age: 18
})
}
clearSpecificField() {
this.userForm.get('email')?.reset()
}
}
<form [formGroup]="userForm">
<input formControlName="name" placeholder="Name">
<input formControlName="email" placeholder="Email">
<input formControlName="age" type="number" placeholder="Age">
<button type="button" (click)="resetForm()">Reset</button>
<button type="button" (click)="resetWithDefaults()">Reset with Defaults</button>
</form>
Here userForm.reset() clears all form values and resets the form state to pristine and untouched. The reset({...}) method accepts an object with default values to set after clearing. Individual form controls can be reset using this.userForm.get('email')?.reset(). This clears validation errors and restores the form to its initial state, improving user experience in data entry scenarios.
Best Practice Note:
This is the same approach we use in CoreUI Angular components for providing clear form reset functionality in enterprise applications and data management interfaces. Always reset forms after successful submission or when users explicitly request to clear their input to maintain clean application state.
