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?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
The second binding changes on every keypress btw.
This question is related to
angular
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />
archive .ts
myMethod(value:string){
...
...
}
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 => {
console.dir(value);
});
Get the change of a specific field:
this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
console.log(value);
});
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
Use ngModelChange
by breaking up the [(x)]
syntax into its two pieces, i.e., property databinding and event binding:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
It works for the backspace key too.
The secret event that keeps angular ngModel synchronous is the event call input. Hence the best answer to your question should be:
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
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: `
<input type="text" [formControl]="searchControl" placeholder="search">
`
})
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 => {
console.log(query);
});
}
}
In my case, the solution is:
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
Let's see why:
What you're looking for is
<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}
Then do whatever you want with the data by accessing the bound this.mymodel
in your .ts file.
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.
Source: Stackoverflow.com