Событие change вызывается только после изменения фокуса ввода. Как сделать так, чтобы событие вызывалось при каждом нажатии клавиши?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
Вторая привязка меняется при каждом нажатии клавиши.
Я просто использовал входное событие и все работало следующим образом:
в .HTML-файл :
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
в .файл TS :
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
Используйте ngModelChange
, разбив синтаксис [(x)]
на две части, т.е. привязку к базе данных свойств и привязку к событиям:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
Это работает и для клавиши Backspace.
<Н1 и GT; (клавиша вверх) событие-это ваш лучший ставку.</Н1> Позвольте's смотри почему:
<Н3>так (клавиша вверх) - это самый безопасный, чтобы пойти с, Потому что...</Н3>
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
Другой способ справиться с подобными ситуациями использовать formControl и подписаться на него'ы valueChanges
, когда ваш компонент инициализируется, который позволит вам использовать rxjs операторы по современным требованиям, как выполнять HTTP-запросы, применять дребезга, пока пользователь закончит писать приговор, принять последнее значение, и пропустить предыдущие, ...
в
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);
});
}
}
Тайное событие, которое держит угловые ngModel одновременный вызов события вход. Следовательно лучшим ответом на ваш вопрос должен быть:
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />
архив .ts
myMethod(value:string){
...
...
}
Что вы'вновь глядя на это
<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}
А потом делай что хочешь с данных доступ к связанным это.mymodel
в вашем .файл ТС.
В моем случае, решение такое:
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"