Angular 2 change event on every keypress

Question

The change event is only called after the focus of the input has changed  How can I make it so that the event fires on every keypress          lt input type  text    ngModel    mymodel   change   valuechange  event     gt    mymodel     The second binding changes on every keypress btw

User · Answer

The  keyup  event is your best bet   Let s see why     change  like you mentioned triggers only when the input loses focus  hence is of limited use   keypress  triggers on key presses but doesn t trigger on certain keystrokes like the backspace   keydown  triggers every time a key is pushed down  Hence always lags by 1 character  as it gets the element state before the keystroke was registered   keyup  is your best bet as it triggers every time a key push event has completed  hence this also includes the most recent character    So  keyup  is the safest to go with because it      registers an event on every keystroke unlike  change  event includes the keys that  keypress  ignores has no lag unlike the  keydown  event

User · Answer

A different way to handle such cases is to use formControl and subscribe to it s valueChanges when your component is initialized  which will allow you to use rxjs operators for advanced requirements like performing http requests  apply a debounce until user finish writing a sentence  take last value and omit previous          import  Component  OnInit  from   angular core   import   FormControl   from   angular forms   import   debounceTime  distinctUntilChanged   from  rxjs operators     Component     selector   some-selector     template         lt input type  text   formControl   searchControl  placeholder  search  gt         export class SomeComponent implements OnInit     private searchControl  FormControl    private debounce  number   400     ngOnInit         this searchControl   new FormControl          this searchControl valueChanges        pipe debounceTime this debounce   distinctUntilChanged           subscribe query   gt            console log query

User · Answer

In my case  the solution is    ngModel   X  Y   ngModelChange   X Y  event

User · Answer

Use ngModelChange by breaking up the   x   syntax into its two pieces  i e   property databinding and event binding    lt input type  text   ngModel   mymodel   ngModelChange   valuechange  event     gt    mymodel     valuechange newValue      mymodel   newValue    console log newValue      It works for the backspace key too

User · Answer

lt input type  text   ngModel   mymodel   keypress   mymodel  event target value   gt    mymodel

User · Answer

What you re looking for is    lt input type  text    ngModel    mymodel   keyup   valuechange      gt    mymodel     Then do whatever you want with the data by accessing the bound this mymodel in your  ts file

User · Answer

The secret event that keeps angular ngModel synchronous is the event call input  Hence the best answer to your question should be    lt input type  text    ngModel    mymodel   input   valuechange  event     gt    mymodel

User · Answer

I ve been using keyup on a number field  but today I noticed in chrome the input has up down buttons to increase decrease the value which aren t recognized by keyup   My solution is to use keyup and change together    keyup   unitsChanged i    true   change   unitsChanged i    true    Initial tests indicate this works fine  will post back if any bugs found after further testing

User · Answer

For Reactive Forms  you can subscribe to the changes made to all fields or just a particular field   Get all changes of a FormGroup   this orderForm valueChanges subscribe value   gt        console dir value         Get the change of a specific field   this orderForm get  orderPriority   valueChanges subscribe value   gt        console log value

User · Answer

lt input type  text   keypress   myMethod myInput value    myInput   gt    archive  ts  myMethod value string

User · Answer

I just used the event input and it worked fine as follows   in  html file     lt input type  text  class  form-control   input   onSearchChange  event target value   gt    in  ts file    onSearchChange searchValue  string   void       console log searchValue

[angular] Angular 2 change event on every keypress

The (keyup) event is your best bet.

So (keyup) is the safest to go with because it...

Examples related to angular