How to clear form after submission in Angular 2? - GeeksforGeeks

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:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Angular Libraries For Web Developers
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
How to set focus on input field automatically on page load in AngularJS ?
How to bundle an Angular app for production?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Convert a string to an integer in JavaScript