Angular2 get entire input value on keypress or keydown

Question

I may be going about this wrong because I am doing something simple but my solutions are very bug prone.

All I want to do is execute a filter on a 3rd party component when input text changes (on key down).

first approach that didn't work:

<input type="text" placeholder="Name Fitler" [(ngModel)]="NameFilter" (keydown)="keyDown($event)" />

the problem is that key down executes before NameFilter is updated with latest characters, so my filter is one character behind

second approach that didn't work

keyDown(event:KeyboardEvent){
    var input = <HTMLInputElement>event.srcElement; 
    this.NameFilter = input.value + event.key; // <-- have to add the latest character
    this.filterChanged();
}

this sort of works but is bug prone. input.value doesn't have the latest character so i am adding it but would need to worry about odd keys etc. I'd like to avoid keyCode filtering if i can.

Is there another event ? or better way to get that value including the latest key down? (i do not want to wait for key up, or enter)

update this works perfectly

<input type="text" placeholder="Name Fitler" [(ngModel)]="NameFilter" (ngModelChange)="filterChanged()" />

This is probably not the best approach but it's working and seems to be similar to what you're trying to accomplish http://stackoverflow.com/questions/37800841/input-mask-fields-in-angular2-forms/37887432#37887432 — Günter Zöchbauer, Dec 08 '16 at 16:57
thanks but im trying not to reinvent the wheel. it's a simple scenario i am sure is covered between angular2 and dom events — Sonic Soul, Dec 08 '16 at 18:02
@GünterZöchbauer like this? (ngModelChange)="modelChange($event)" yes that works! just a little worried because i can't find any documentation on angular site but i'll sue it for now thanks ! — Sonic Soul, Dec 08 '16 at 18:19
ngModelChange is mentioned here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel — , Dec 08 '16 at 18:32
thanks! i tried searching their api documentation for it but i guess they don't include events in search indexes. this is a perfect solution — Sonic Soul, Dec 08 '16 at 18:33
It's just an `@Output()` of the `NgModel` directive. With `[(ngModel)]="..."` you are using it implicitly. See the yellow box below https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way — Günter Zöchbauer, Dec 08 '16 at 18:37

score 12 · Accepted Answer · answered Dec 08 '16 at 18:40

12

You can use (ngModelChange)="...".

(ngModelChange)="keyDown($event)"

ngModelChange is emitted when [(ngModel)]="NameFilter" updates NameFilter.

The () inside [ngModel]) is just a shorter form (syntactic sugar) for

[ngModel]="NameFilter" (ngModelChange)="NameFilter = $event"

See also https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way

answered Dec 08 '16 at 18:40

Günter Zöchbauer

623,577
216
2,003
1,567

This do not answer the question. Its a nice approach but I'm still loking for a way to retrieve this value using keydown – Leonardo Rick Jun 22 '22 at 10:37

score 5 · Answer 2 · answered Mar 05 '21 at 19:36

5

Example without NgModel

<input type="text" (keyup)="onKeyPress($event)">

onKeyPress($event) {
    console.log($event.target.value)
}

answered Mar 05 '21 at 19:36

Erick Cisneros

51
1
1

You are a Hero. – 10101101 Jun 04 '22 at 00:19

Angular2 get entire input value on keypress or keydown

2 Answers2