How to Clear an Input Element in Angular 14+ Application in Multiple Ways

Clearing an Input element on the Click of a button or mouse over or when any other event occurred is one of the common requirement in many applications involving forms or only input elements.

In Angular applications we can handle an input element in three different ways. One is, without using any forms module, another way is by using FormsModule and another way is by using ReactiveFormsModule. We will see how to clear an input element using each different way.

1.How to Clear an Input element without using any forms module in Angular 14+ Application

We can clear an input element in multiple ways without using any additional forms module. By using Template Reference Variables, by using ViewChild

1.a How to Clear an Input Element using Template Reference Variables in an Angular application

Suppose we have HTML like this

<h3>How to Clear Input Element - HowtoJS.io</h3>

<input type="text" class="form-control" #username >
<button class="btn btn-primary" (click)="handleInput(username)" >Submit</button>

then we can clear the element on click event like this

handleInput(inputElement: HTMLInputElement) {
    console.log(inputElement.value);
    inputElement.value = '';
  }

If you want to clear the element on some event without bothering about its value(such as reset button) , you can do it directly in the template instead of creating a handling method inside the template

<input type="text" class="form-control" #username >
<button class="btn btn-primary" (click)="username.value = '' " >Submit</button>

1.b How to Clear an Input Element by using ViewChild

We can access an element inside the ts file using ViewChild ( if the input element you are trying to access is coming through content projection, then use ContentChild instead of ViewChild), then access / modify the element value.

HTML:

<h3>How to Clear Input Element - HowtoJS.io</h3>

<input type="text" class="form-control" #username >
<button class="btn btn-primary" (click)="handleInput()" >Submit</button>

TypeScript:

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

@Component({
  selector: 'app-clearinput',
  templateUrl: './clearinput.component.html',
  styleUrls: ['./clearinput.component.css']
})
export class ClearinputComponent implements OnInit {

  @ViewChild('username') inputEl!: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

  handleInput( ) {
    // Without type safety
    // console.log(this.inputEl.nativeElement.value);
    // this.inputEl.nativeElement.value = '';
    
    // With type safety
    console.log((this.inputEl.nativeElement as HTMLInputElement).value);
    (this.inputEl.nativeElement as HTMLInputElement).value = '';

  }

}

2. How to Clear an input element using Template Forms in Angular

Suppose we have the following template

<h3>How to Clear Input Element - HowtoJS.io</h3>
<form #userForm="ngForm" (ngSubmit)="handleForm(userForm)" >
<input type="text" class="form-control" ngModel name="username" >
<button class="btn btn-primary" >Submit</button>
</form>

2a. How to Clear an input element by using reset method

We can clear an input element by using the reset method on an individual form control (if you want to reset entire form, you can run the reset method on the main form object)

handleForm(form: NgForm ) {
    console.log(form.controls['username'].value);
    form.controls['username'].reset();
  }

2b. How to Clear an input element by using the setValue/patchValue method

setValue:

handleForm(form: NgForm ) {
    console.log(form.controls['username'].value);
    form.controls['username'].setValue('')
  }

We can also use patchValue instead of setValue in the above example (when you use patchValue, you can partially set the value of a form control which is of type form group. In our example, as it is a single input element, patchValue or setValue do not make any difference ) .

The difference between reset and setValue/patchValue methods is, reset, resets other properties of the element such as dirty, touched etc., also and setValue/patchValue only resets the value and other properties will be intact.

Note that, you cannot clear / set a value to an element by using any of the following ways.

// Following ways do not work
form.controls['username'].value = '' ;
form.value['username'] = ''

2c. How to clear an input element by using two way binding on ngModel

We can first have a property in our component

fullName: string = 'John Doe';

then, we can do two way binding on an input element

<form #userForm="ngForm" (ngSubmit)="handleForm()" >
<input type="text" class="form-control" [(ngModel)]="fullName" name="username" >
<button class="btn btn-primary" >Submit</button>
</form>

then clear the element by setting the value of the property to an empty string

 handleForm() {
    this.fullName = '';
  }

3.How to Clear an input element using Reactive Forms Module

We can clear an input element using reactive forms module similar to the way of doing it with Template forms using setValue, patchValue and reset.

HTML:

<form [formGroup]="loginForm">
  <input type="text" class="form-control" formControlName="username">
  <button class="btn btn-primary" (click)="handleForm()">submit</button>
</form>

TS:

loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      username: ''
    })
  }
  ngOnInit(): void {
  }

  handleForm() {
    console.log(this.loginForm.controls['username'].value);
    // this.loginForm.controls['username'].setValue('');
    // this.loginForm.controls['username'].patchValue('');
    this.loginForm.controls['username'].reset();
  }

We can also clear an input element by directly accessing the DOM from the angular application. This is not a recommended method, but still we can do.

How to Clear an Input Element in Angular 14+ Application in Multiple Ways