更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二次绑定在每个按键上都发生变化。
更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二次绑定在每个按键上都发生变化。
当前回答
我用下面的代码在Angular 11中解决了这个问题:
<input type="number" min="0" max="50" [value]="input.to" name="to"
(input)="input.to=$event.target.value; experienceToAndFrom()">
并且,experienceToAndFrom()是我的组件中的一个方法。
PS:我尝试了以上所有的解决方案,但都不奏效。
其他回答
对于响应式表单,您可以订阅对所有字段或仅对特定字段所做的更改。
获取一个FormGroup的所有更改:
this.orderForm.valueChanges.subscribe(value => {
console.dir(value);
});
获取特定字段的更改:
this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
console.log(value);
});
<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}
更新
https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event
警告:由于此事件已弃用,您应该使用beforeinput或keydown代替。
在我的案例中,解决方案是:
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
保持angular ngModel同步的秘密事件是事件调用输入。因此,你的问题的最佳答案应该是:
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
处理这种情况的另一种方法是使用formControl并在组件初始化时订阅它的valueChanges,这将允许您使用rxjs操作符来执行高级要求,如执行http请求,应用debounce直到用户写完一个句子,获取最后一个值并省略前一个值,等等。
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);
});
}
}