Reset input value in angular 2

Issue

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/

Solution

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.

Answered By - Rahul Singh