How to Clear an Input Field in Angular?

When the user fills in the data inside a form and submits it, it is necessary to clear all the form inputs after his submission. Because, if we do not clear the form fields, the user can submit the same data multiple times.

Additionally, if the form fields are cleared after submission, it gives a good indication to the user that the form is now ready to fill in the data for the new entry.

In this article, I will show you how you can clear an input field when you are working with reactive forms as well as with the template-driven forms.

So, without further ado let’s get started.

Use the reset() Method with Reactive Forms

If you are working with Angular’s reactive forms, you can very easily clear an input field using the reset() method.

The reset() method is used to reset a reactive form or form control to its initial value. This means that the form field will be set back to its initial value if you call the reset() method on it.

Let’s say we have an input field with the form control name as 'fullName' and a button inside our template file. We want to clear this input field as soon as someone clicks on the button.

<div>
    <form [formGroup]="userForm">
        <div>
            <input type="text" formControlName="fullName" placeholder="type your full name">
            <button (click)="clearInput()">Clear Input</button>
        </div>
    </form>
</div>

Now, inside out ts file, we need to define the clearInput() function. Inside this function, we will use the reset() method to clear the input field.

As you can see below:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {

    // Create the form group
    this.userForm = this.formBuilder.group({

      fullName: ['', Validators.required],
      // ...
      // ... 

    });

  }

  ngOnInit(): void { }

  clearInput() {

    // Clear the input field
    this.userForm.get('fullName')?.reset();

  }

}

Below is the outcome of the above code:

As you can see from the above output, as soon as the button is clicked, the input field becomes clear.

Using the Element Reference & ViewChild() Decorator

If you are working with template-driven forms, you can give a reference to the input field inside the template file and then use the @ViewChild() decorator to access the input field inside the ts file.

To add a reference to an element use a # symbol followed by the reference name for eg. #fullName:

<div>
    <input type="text" #fullName placeholder="Type your full name">
    <button (click)="clearInput()">Clear Input</button>
</div>

Now, to clear this input field value, we have to access it inside the ts file using the @ViewChild() decorator and set its value to an empty string('').

See the following implementation:

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  // Access the fullName input field
  @ViewChild('fullName') fullNameInput: any; 

  constructor() { }

  ngOnInit(): void { }

  clearInput() {

    // Clear the input field
    this.fullNameInput.nativeElement.value = '';

  }

}

After running the above code, you will get the following output:

Using the ngModel Directive

If you are using the ngModel directive to communicate between the template and ts files, you can clear the input field by simply setting its value to an empty string('') in the ts file.

Let’s say we have bound the input field to a variable named fullName using the ngModel directive:

<div>
    <input type="text" [(ngModel)]="fullName" placeholder="Type your full name">
    <button (click)="clearInput()">Clear Input</button>
</div>

Now, inside the ts file, we have to declare the variable fullName and set it to an empty string inside the clearInput() click event handler function:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  // Bind the input with below variable using [(ngModel)]
  fullName: string = '';
   
  constructor() { }

  ngOnInit(): void { }

  clearInput() {

    // Clear the input field
    this.fullName = '';

  }

}

Below is the outcome of the above code:

As you can see from the above output, the input field becomes empty as soon as you click the button.

Conclusion

In this article, we learned different ways to clear an input field using Angular.

If you are using the input field inside reactive forms, you can clear it using the built-in reset() method. And if you are working with temlate-driven forms, you can either use the ngModel directive or add a reference to the input field and set its value to an empty string to clear its value.

Thanks for reading.