Reset input value in angular 2

Question

I have the following input field :

<input mdInput placeholder="Name" #filterName name="filterName" >

I want to clear value on click of clear button :

<button (click)="clearFilters()">Clear</button>

app.component.ts function :

filterName : string = null;
clearFilters() {

this.filterName = '';
}

Please let me know whats wrong with above as its not working for me.

Here the jsfiddle https://jsfiddle.net/8fw8uq3x/

https://angular.io/guide/reactive-forms look for the reset part — Doomenik, Jul 24 '17 at 11:37

score 77 · Accepted Answer · edited May 06 '21 at 19:30

77

you can do something like this

<input  placeholder="Name" #filterName name="filterName" />
<button (click) = "filterName.value = ''">Click</button>

or

Template

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >
<button (click) = "clear()'">Click</button>

In component

filterName:string;
clear(){
this.filterName = '';
}

Update

If it is a form

easiest and cleanest way to clear forms as well as their error states (dirty , prestine etc)

this.form_name.reset();

for more info on forms read out here

https://angular.io/docs/ts/latest/guide/forms.html

PS: As you asked question there is no form used in your question code you are using simple two day data binding using ngModel not with formControl.

form.reset() method works only for formControls reset call

A plunker to show how this will work link.

edited May 06 '21 at 19:30

SwissCodeMen

4,222
8
24
34

answered Jul 24 '17 at 12:22

Rahul Singh

19,030
11
64
86

i used multiple filter like filterName ,filterDept, – Newbie Jul 24 '17 at 12:41
@Rush1312 what do you mean by that ? multiple filters – Rahul Singh Jul 24 '17 at 12:41
1

Multiple filters means i have used 5 input as filters and want to clean all input values to blank when click on clear.. By the way, your solution works for me form.reset() as i have used form. Thanks buddy. – Newbie Jul 24 '17 at 17:37
Also can you please let me know the difference between [(ngModel)]="filterName" and #filterName. Means when what should we use. – Newbie Jul 24 '17 at 17:56
[(ngModel)] is used for two way binding in Angular , where as #filterName is used as a temporary template reference variable like let filterName – Rahul Singh Jul 24 '17 at 18:04
Okay.. so if i used [(ngModel)] in input then how can i access that input's value from componen (app.component.ts). – Newbie Jul 24 '17 at 18:09
That ngmodel is bind to variable right like in the eg [(ngModel )] = filterName – Rahul Singh Jul 24 '17 at 18:12
Using ngModel worked for me, using custom input component – Matheus Ribeiro May 11 '21 at 21:23

score 16 · Answer 2 · answered Mar 31 '18 at 14:53

I know this is an old thread but I just stumbled across.

So heres how I would do it, with your local template variable on the input field you can set the value of the input like below

<input mdInput placeholder="Name" #filterName name="filterName" >

@ViewChild() input: ElementRef

public clear() {
    this.input.NativeElement.value = '';
}

Pretty sure this will not set the form back to pristine but you can then reset this in the same function using the markAsPristine() function

If using `@ViewChild()` then this would be the right syntax - and it will also clear the specific form fields — simons, Sep 01 '18 at 14:41

Vipin · Answer 3 · 2017-07-24T12:21:01.677

6

Use @ViewChild to reset your control.

Template:

<input mdInput placeholder="Name" #filterName name="filterName" >

In Code:

@ViewChild('filterName') redel:ElementRef;

then you can access your control as

this.redel= "";

edited Jul 24 '17 at 12:21

answered Jul 24 '17 at 12:15

Vipin

69
2

1

this.redel="" gives me an error. I changed it for this.redel.nativeElement.value="" and works fine. – Jimmy Salazar Aug 29 '22 at 18:47

score 4 · Answer 4 · answered Mar 25 '20 at 23:12

If you want to clear the input by using the HTML ONLY, then you can do something like this:

<input type="text"
       (keyup)="0"
       #searchCollectorInput
       class="search-metrics"
       placeholder="Find">

Notice the importance of (keyup)=0 and the reference to the input of course.

Then reset it like this:

<span *ngIf="searchCollectorInput.value.length > 0"
      (click)="searchCollectorInput.value = ''"
      class="fa fa-close" ></span>

score 3 · Answer 5 · answered Jun 22 '20 at 11:22

Working with Angular 7 I needed to create a file upload with a description of the file.

HTML:

<div>
File Description: <input type="text" (change)="updateFileDescription($event.target.value)" #fileDescription />
</div>

<div>
<input type="file" accept="*" capture (change)="handleFileInput($event.target.files)" #fileInput /> <button class="btn btn-light" (click)="uploadFileToActivity()">Upload</button>
</div>

Here is the Component file

  @ViewChild('fileDescription') fileDescriptionInput: ElementRef;
  @ViewChild('fileInput') fileInput: ElementRef;

ClearInputs(){
        this.fileDescriptionInput.nativeElement.value = '';
        this.fileInput.nativeElement.value = '';
}

This will do the trick.

score 2 · Answer 6 · answered Jan 30 '19 at 16:39

2

You can use the event.target.result to reset the input from a component directly.

event.target.value = ""

answered Jan 30 '19 at 16:39

Site Antipas

141
1
4

cotnic · Answer 7 · 2017-07-24T12:34:35.777

0

You should use two way binding. There is no need to have a ViewChild since it's the same component.

So add ngModel to your input and leave the rest. Here's your edited code.

<input mdInput placeholder="Name" [(ngModel)]="filterName" name="filterName" >

edited Jul 24 '17 at 12:34

answered Jul 24 '17 at 12:21

cotnic

158
2
11

without having a button how will you reset the value ? you should add this ` click(){this.filterName = ''};` – Rahul Singh Jul 24 '17 at 12:27
Well the button was declared already in his code. Didn't include it in my anwser. – cotnic Jul 24 '17 at 12:28
you should mention it properly in the answer it's hard for some one to decipher it right – Rahul Singh Jul 24 '17 at 12:30
i think it was quite obvious. But thanks for the heads up anyway. :) – cotnic Jul 24 '17 at 12:33

score 0 · Answer 8 · edited Jul 31 '19 at 11:09

0

In order to reset the value in angular 2 use:

this.rootNode.findNode("objectname").resetValue();

edited Jul 31 '19 at 11:09

Tasos K.

7,979
7
39
63

answered Jul 31 '19 at 11:00

sweetnsalt

9
1

score 0 · Answer 9 · answered Nov 14 '19 at 01:07

0

If you want to clear all the input fields after submitting the form, consider using reset method on the FormGroup.

answered Nov 14 '19 at 01:07

Durja

637
13
20

score 0 · Answer 10 · edited Nov 13 '20 at 05:59

0

check the @viewchild in your .ts

@ViewChild('ngOtpInput') ngOtpInput:any;

set the below code in your method were you want the fields to be clear.
```
yourMethod(){
    this.ngOtpInput.setValue(yourValue);
}
```

edited Nov 13 '20 at 05:59

Suraj Rao

29,388
11
94
103

answered Nov 13 '20 at 05:47

syed

606
8
11

score 0 · Answer 11 · answered Jun 12 '22 at 05:06

TS Code

export class AppComponent {

 value:any;
 
 clickHandler()
  {
    this.value="";}
  }

HTML code

<div>
    <button (click)="clickHandler()" >Submit</button>
    <input type="text" [(ngModel)]="value">
</div>

then you need implement this to your module:

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

after that add this: FormsModule to imports section in module

score 0 · Answer 12 · answered Feb 04 '23 at 20:48

I recently had the exact same issue. I had an angular component with lot's of input fields and event select and option fields and i wanted to reset the component all at once.

Just running a reset function and resetting every element step by step seemed pretty elaborate and i searched for a better solution. Simply running this.ngOnInit won't reinitialize the component (at least in my case), it just simply runs your implemented code.

My first solution was to reassign the input fields values (my Input field values were binded to a variable in my component.ts), which kind of works, but only when you really change the value of the variable, otherwise angular won't detect any change an the rendered element will just stay the same.

So i came up with this solution: Just wrap an ng-container template around the content you want to reset and copy that one more time and use a toggle variable with the *ngIf directive to switch between the two of them:

HTML

<ng-container *ngIf="!displayToggle">
    <div #contentYouWantToDisplay>
        <input value="{{myNumber | number: '1.2-2'}}"
    </div>
</ng-container>

<ng-container *ngIf="displayToggle">
    <div #contentYouWantToDisplay>
        <input value="{{myNumber | number: '1.2-2'}}"
    </div>
</ng-container>

TS

resetContent(){
  displayToggle=!displayToggle;
  //other resets:
}

So when you call the resetContent function div will be rerendered and the user input will be reset.

Please notice that all variables will remain in the same state, so you might have to run some other resets (in my div the user also had the option toggle a button and then another div expanded, so i also had to reset the divs height in the resetContent function)

Reset input value in angular 2

12 Answers12

Linked