Reset input value in angular 2

Question

I have the following input field     lt input mdInput placeholder  Name   filterName name  filterName   gt    I want to clear value on click of clear button     lt button  click   clearFilters    gt Clear lt  button gt    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

User · Answer

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

User · Answer

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

User · Answer

Use   ViewChild to reset your control   Template     lt input mdInput placeholder  Name   filterName name  filterName   gt    In Code    ViewChild  filterName   redel ElementRef    then you can access your control as  this redel

User · Answer

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

User · Answer

If you want to clear the input by using the HTML ONLY  then you can do something like this    lt input type  text          keyup   0          searchCollectorInput        class  search-metrics         placeholder  Find  gt    Notice the importance of  keyup  0 and the reference to the input of course   Then reset it like this    lt span  ngIf  searchCollectorInput value length  gt  0         click   searchCollectorInput value             class  fa fa-close   gt  lt  span gt

User · Answer

Working with Angular 7 I needed to create a file upload with a description of the file  HTML   lt div gt  File Description   lt input type  quot text quot   change   quot updateFileDescription  event target value  quot   fileDescription   gt   lt  div gt    lt div gt   lt input type  quot file quot  accept  quot   quot  capture  change   quot handleFileInput  event target files  quot   fileInput   gt   lt button class  quot btn btn-light quot   click   quot uploadFileToActivity   quot  gt Upload lt  button gt   lt  div gt   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

User · Answer

you can do something like this        lt input  placeholder  Name   filterName name  filterName    gt       lt button  click     filterName value       gt Click lt  button gt    or   Template   lt input mdInput placeholder  Name    ngModel    filterName  name  filterName   gt   lt button  click     clear     gt Click lt  button gt    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

User · Answer

In order to reset the value in angular 2 use    this rootNode findNode  objectname   resetValue

User · Answer

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    lt input mdInput placeholder  Name    ngModel    filterName  name  filterName   gt

User · Answer

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

[angular] Reset input value in angular 2

Examples related to angular