Home » Angular JS

How to Clear Form After Submission in Angular?

By IncludeHelp Last updated : September 1, 2024

To clear a form in angular after submitting refers to erasing all the input values after clicking on the specific button in the form.

In Angular, forms are a method or a way to handle user input, validation, and submission in web applications. Angular provides two types of forms as follows:

Types of Angular forms:

• Template-driven form
• Reactive Form

Template-driven Form: In Angular, Template-driven forms are simpler more suitable for basic forms, and less complex. They depend primarily on directives in the HTML template to handle form controls, validation, and submission.

Following is the snippet of code of the Template-driven form:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
   <label for="name">Name:</label>
   <input type="text" id="name" name="name" ngModel required>
  
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" ngModel required>
  
   <button type="submit">Submit</button>
 </form>

Reactive Form: In Angular, Reactive forms provide a more programmatic approach and are more suitable for complex forms with advanced validation requirements. This form uses Angular FormControl, FormGroup, and FormArray classes to create and manage forms in the component class, providing you with more control over form behavior and validation.

Following is the snippet of code of the Reactive form:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
   <label for="name">Name:</label>
   <input id="name" formControlName="name">
  
   <label for="email">Email:</label>
   <input id="email" formControlName="email">
  
   <button type="submit">Submit</button>
 </form>

Resetting or Clearing Angular Forms After Submitting

1. Clearing a Template-Driven Form

To clear a template-driven form in Angular, you use the resetForm() method provided by the NgForm instance. This method is available because NgForm manages the state and values of the form. Make sure the following module should be imported into your "app.module.ts" file:

"import { FormsModule} from '@angular/forms';"

Example

.html file

<h1>Template-driven Form</h1>
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
   <label for="name">Name:</label>
   <input type="text" id="name" name="name" ngModel required>
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" ngModel required>
   <button type="submit">Submit</button>
   <button type='button' (click)="resetForm(myForm)">Reset</button>
   <br>
   {{msg}}
 </form>

.ts file

// home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

 constructor() { }
 msg = '';
 onSubmit(form: any){
   console.log("Form value: " + form.value);
   this.msg = 'Form submitted...';
 }
 resetForm(form: any){
   form.resetForm();
   this.msg = "Form cleared..!";
 }
 ngOnInit(): void {
 }
}

Output

After resetting the form

2. Clearing a Reactive Form

To clear a reactive form in Angular, you use the reset() method provided by the FormGroup instance. This method is part of the Angular reactive forms module, which allows you to programmatically manage form states and values. Make sure that the following module should be imported into your "app.module.ts" file:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Example

.html file

<h1>Reactive Form</h1>
<form [formGroup] = "myForm">
   <label for="name">Name:</label>
   <input type="text" name="name" formControlName="name">
   <label for="email">Email:</label>
   <input type="email" name="email" formControlName="email">
   <button type="submit" (click) = "Submit()">Submit</button>
   <button type='button' (click)="resetForm()">Reset</button>
   <br>
   {{msg}}
 </form>

.ts file

// home.component.ts

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

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

 constructor(private fb: FormBuilder) { }
 msg = '';
 myForm: FormGroup = new FormGroup({});
 ngOnInit(): void {
   this.myForm = this.fb.group({
     'name': new FormControl(''),
     'email': new FormControl('')
   });
 }
 Submit(){
   console.log(this.myForm.value);
   this.msg = "Form submitted...!";
 }
 resetForm(){
   this.myForm?.reset();
   this.msg = "Cleared...!";
 }
}

Output

After resetting the form