Skip to content
Related Articles

Related Articles

Improve Article

How to clear form after submission in Angular 2?

  • Last Updated : 09 Jun, 2020

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




// 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>

Example: .ts file




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
  
}
  
}

Resetting a form in Reactive forms:

Example: .html file




<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>

Example: .ts file




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
   
}
  
}

Output:

After submitting the form, the output would be:




My Personal Notes arrow_drop_up
Recommended Articles
Page :