只有在输入的焦点发生变化后才会调用 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);
}
通过将 [(x)]
语法分成两部分来使用 ngModelChange
,即属性数据绑定和事件绑定:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
它也适用于退格键。
(keyup) 事件是您最好的选择。
让我们看看为什么:
(更改)就像您提到的那样,仅当输入失去焦点时才会触发,因此用途有限。 (keypress) 在按键时触发,但不会在某些击键时触发,例如退格键。 (keydown) 每次按下键时触发。因此总是滞后 1 个字符;因为它在注册按键之前获取元素状态。 (keyup) 是您最好的选择,因为它会在每次按键事件完成时触发,因此这也包括最近的字符。
所以 (keyup) 是最安全的,因为它......
与(更改)事件不同,在每次击键时注册一个事件
包括 (keypress) 忽略的键
与 (keydown) 事件不同,没有延迟
keyup
肯定是最安全的选项之一,但是,input
事件比 keyup
领先一步。 keyup
与 input
不同,如果 textbox 的值通过任何其他方式(例如绑定)更改,则它不起作用。
(change)
以及解决方法的问题,然后是一些。接受的答案完全糟透了!
<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);
});
}
}
FormGroup
应用相同的代码
保持 Angular ngModel 同步的秘密事件是事件调用输入。因此,您的问题的最佳答案应该是:
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
<input type="text" (keypress)="myMethod(myInput.value)" #myInput />
存档 .ts
myMethod(value:string){
...
...
}
对于反应式表单,您可以订阅对所有字段或特定字段所做的更改。
获取 FormGroup 的所有更改:
this.orderForm.valueChanges.subscribe(value => {
console.dir(value);
});
获取特定字段的变化:
this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
console.log(value);
});
你正在寻找的是
<input type="text" [(ngModel)]="mymodel" (keyup)="valuechange()" />
{{mymodel}}
然后通过访问 .ts 文件中的绑定 this.mymodel
对数据执行任何操作。
我设法通过使用以下代码在 Angular 11 中解决了这个问题:
<input type="number" min="0" max="50" [value]="input.to" name="to"
(input)="input.to=$event.target.value; experienceToAndFrom()">
而且,experienceToAndFrom()
是我的组件中的一个方法。
PS:我尝试了上述所有解决方案,但没有奏效。
就我而言,解决方案是:
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
我一直在数字字段上使用 keyup,但今天我注意到在 chrome 中输入有向上/向下按钮来增加/减少 keyup 无法识别的值。
我的解决方案是一起使用 keyup 和 change :
(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"
初步测试表明这工作正常,如果在进一步测试后发现任何错误,将回发。
这个问题已经用多种方式回答了。但是,如果您想查看另一种方式,特别是在对更改事件采取任何操作之前添加一些延迟,那么您可以使用带角度形式 valuechanges() 的 debounceTime() 方法。此代码需要添加到 ngOnInit() 钩子中或创建一个单独的方法并从 ngOnInit() 调用它。
ngOnInit(): void {
this.formNameInputChange();
}
formNameInputChange(){
const name = this.homeForm.get('name'); // Form Control Name
name?.valueChanges.pipe(debounceTime(1000)).subscribe(value => {
alert(value);
});
}
// this is reactive way..
homeForm = this.fb.group({
name:['']
});
不定期副业成功案例分享