How to clear form after submission in Angular 2?

In Angular 2, they are two types of forms:

  • Template-driven forms.
  • Reactive forms.

In template-driven forms, most of the content will be populated in .html file.
In Reactive forms, most of the functionalities and content will be performed in .ts file. The main advantage of reactive forms is, we can create custom validations and the second pivotal advantage is when we are performing unit testing, as the HTML code will be clean, it is more feasible to compose unit tests.

Resetting a form in template-driven approach:

In template driven approach, we need to import NgForm from ‘@angular/forms’ and we use [(ngModel)] directive for two way data-binding and we should also import FormsModule from ‘@angular/forms’ in app.module.ts file. In below line the input format is present. In addition to it, when we mention ngModel directive then we need to add name attribute to the input type.

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

In Reactive forms, we need to import FormGroup from '@angular/forms'.

After importing the above-mentioned modules in the respective approach, angular forms module provides an inbuilt method called reset(). We can use the method and we can reset the form. 
 



Example: .html file

filter_none

edit
close

play_arrow

link
brightness_4
code

// In .html file
<form #login="ngForm" (ngSubmit)="completeLogin(login)">
    <h3>Login Form</h3>
  <label for="name">Username :</label>
  <input type="text" [(ngModel)]="username" name="name" id="name">
    
  <label for="password">Password :</label>
  <input type="password"
        [(ngModel)]="password"
        name="name" 
        id="password">
    
  <button type="submit">Submit</button>
  
</form>

chevron_right


Example: .ts file

filter_none

edit
close

play_arrow

link
brightness_4
code

import {NgForm} from '@angular/forms'
import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: "app-login",
  templateUrl: "./login.html",
  styleUrls: [],
})
  
  
export class Sample implements OnInit{
  
constructor(){}
  
ngOninit(){
}
  
username='';
password='';
  
completeLogin(login :NgForm){
 // In .ts file
  
login.reset() 
// call this inbuilt method to reset the form
  
}
  
}

chevron_right


Resetting a form in Reactive forms:

Example: .html file

filter_none

edit
close

play_arrow

link
brightness_4
code

<form [formGroup]="login" (ngSubmit)="completeLogin()">
     // In.html file
  <h3>Login Form</h3>
.
.  <label for="name">Username :</label>
  <input type="text" formControlName="username" id="name">
    
  <label for="password">Password :</label>
  <input type="password" 
         formControlName="password" id="password">
    
  <button type="submit">Submit</button>
</form>

chevron_right


Example: .ts file

filter_none

edit
close

play_arrow

link
brightness_4
code

import {FormGroup, FormControl} from '@angular/forms' 
import { Component, OnInit } from '@angular/core';
  
  
@Component({
  selector: "app-signin",
  templateUrl: "./signin.html",
  styleUrls: ["],
})
  
export class Sample implements OnInit{    
// In.ts file
  
login:FormGroup;
constructor(){}
  
ngOninit(){
  
login=newFormGroup({
username:new FormControl(''),
password:new FormControl(''),
})
  
}
  
completeLogin(){   
  
this.login.reset();  
// calling this method will reset the method
   
}
  
}

chevron_right


Output:

After submitting the form, the output would be:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.