How to Reset Forms in Angular 2

1. the resetForm() Method in Angular 2
2. Steps to Reset a Form Using the resetForm() Method in Angular 2

This tutorial will show you how to reset the form in Angular 2.

The ngForm directive provides a way to create and initialize a form and set up validation for its fields. One common use for ngForm is resetting the values of all form controls on your page back to their initial state.

You need to add a reference in your HTML code to the ngForm directive and then access its reset method.

the resetForm() Method in Angular 2

The resetForm() method is a built-in Angular 2 method that clears the form values and resets them to their initial state.

The resetForm() method can be invoked by passing a boolean as an argument. The form’s fields and values will be cleared if the boolean argument is valid.

If it is false, only the fields with properties set to false will be removed.

Steps to Reset a Form Using the resetForm() Method in Angular 2

The following are the steps to reset a form in Angular 2 using the resestForm() method.

Syntax for importing the form type:

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

Syntax for instantiating the form type:

let myForm = new ResestForm();

Register your form with your component to be used in this component and its child components. This will ensure that all child components will know about this form and will be able to use it.

Call this method in your code when you want to reset the form, like when the user clicks a button or submits data on the form.

Example (TypeScript):

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent  {
    myForm: FormGroup;
    constructor(fb: FormBuilder) {
        this.myForm = fb.group({
            name: '2'
        })
    }
    resetForm() {
        this.myForm.reset();
    }
}

Example (HTML):

<form [formGroup]="myForm" novalidate>
<select formControlName="name">
    <option disabled hidden value="null">Please select</option>
    <option value="1">Pakistan</option>
    <option value="2">USA</option>
    <option value="3">Uk</option>
</select>
</form>
<button (click)="resetForm()">reset</button>

Click here to check the live demonstration of the code above.