Open In App

How to clear form after submission in Angular 2?

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 09 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads