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/

Answer 1

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.

Answer 2

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