Clearing an input text field in Angular2

Question

Why is this method not working when I try to clear the text field    lt div gt         lt input type  text  placeholder  Search      value   searchValue  gt         lt button  click   clearSearch    gt Clear lt  button gt   lt  div gt    export class App     searchValue string         clearSearch         this searchValue               What I m expecting  since I m passing a property for search value  when I click the button  it should get the updated value which is processed in clearSearch   function    I also noticed that if I set a default value to searchValue  clearSearch   function works  but only once    Please check my plunker

User · Answer

What about something like this  without a button   lt input type  quot text quot  placeholder  quot Search    quot   value   quot searchValue quot  onblur  quot this value    quot  gt

User · Answer

Method 1   Using  ngModel     Component     selector   my-app     template         lt div gt         lt input type  text  placeholder  Search        ngModel    searchValue  gt         lt button  click   clearSearch    gt Clear lt  button gt       lt  div gt          export class App     searchValue string         clearSearch         this searchValue   null             Plunker code  Plunker1   Method 2   Using null value instead of empty quotation marks    Component     selector   my-app     template         lt div gt         lt input type  text  placeholder  Search      value   searchValue  gt         lt button  click   clearSearch    gt Clear lt  button gt       lt  div gt          export class App     searchValue string         clearSearch         this searchValue   null             Plunker code  Plunker2

User · Answer

Some of the answers have suggested to do the following this myForm get  fieldName   reset     While that works fine  I personally like accessing the field object directly  instead of doing a string-based lookup  this myForm controls fieldName reset

User · Answer

This is a solution for reactive forms  Then there is no need to use  ViewChild decorator     clear         this myForm get  someControlName   reset

User · Answer

HTML   lt input type  text    ngModel    obj mobile  name  mobile  id  mobile  class  form-control  placeholder  Mobile E-mail    gt      TS  onClickClear       this obj mobile  undefined

User · Answer

1  First Method  you have to assign null or empty string here  this searchValue   null    or this searchValue          Working Plunker  because no event is being fired from angular change detection  so you have to assign some value either null or string with space  2  Second Method   use of   ngModel   it should work with ngModel       why      because as you did binding with value  attribute which is only property binding not event binding  so angular doesn t run change detection because no event relevant to Angular is fired  If you bind to an event then Angular runs change detection and the binding works and value should be changes   see working example of same with ngModel  Working Example with ngModel

User · Answer

Template driven method   receiverInput  ngModel   blur   receiverInput control setValue

User · Answer

You can just change the reference of input value  as below   lt div gt       lt input type  text  placeholder  Search      reference gt       lt button  click   reference value     gt Clear lt  button gt   lt  div gt

User · Answer

There are two additional ways to do it apart from the two methods mentioned in  PradeepJain s answer  I would suggest not to use this approach and to fall back to this only as a last resort if you are not using   ngModel   directive and also not using data binding via  value   Read this for more info  Using ElementRef app component html  lt div gt         lt input type  quot text quot   searchInput placeholder  quot Search    quot  gt         lt button  click   quot clearSearchInput   quot  gt Clear lt  button gt   lt  div gt   app component ts export class App      ViewChild  searchInput   searchInput  ElementRef     clearSearchInput         this searchInput nativeElement value              Using FormGroup app component html  lt form  formGroup   quot form quot  gt       lt div  ngIf  quot first invalid quot  gt  Name is too short   lt  div gt       lt input formControlName  quot first quot  placeholder  quot First name quot  gt       lt input formControlName  quot last quot  placeholder  quot Last name quot  gt       lt button type  quot submit quot  gt Submit lt  button gt   lt  form gt   lt button  click   quot setValue   quot  gt Set preset value lt  button gt   lt button  click   quot clearInputMethod1   quot  gt Clear Input Method 1 lt  button gt   lt button  click   quot clearInputMethod2   quot  gt Clear Input Method 2 lt  button gt   app component ts export class AppComponent     form   new FormGroup       first  new FormControl  Nancy   Validators minLength 2        last  new FormControl  Drew            get first    any   return this form get  first        get last    any   return this form get  last        clearInputMethod1     this first reset    this last reset        clearInputMethod2     this form setValue  first      last            setValue     this form setValue  first   Nancy   last   Drew          Try it out on stackblitz Clearing input in a  FormGroup

[angular] Clearing an input text field in Angular2

Examples related to angular