更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二次绑定在每个按键上都发生变化。
更改事件仅在输入的焦点发生更改后才被调用。我怎样才能使事件在每次按键时触发?
<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" />
{{mymodel}}
第二次绑定在每个按键上都发生变化。
当前回答
在我的案例中,解决方案是:
[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"
其他回答
对于响应式表单,您可以订阅对所有字段或仅对特定字段所做的更改。
获取一个FormGroup的所有更改:
this.orderForm.valueChanges.subscribe(value => {
console.dir(value);
});
获取特定字段的更改:
this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
console.log(value);
});
保持angular ngModel同步的秘密事件是事件调用输入。因此,你的问题的最佳答案应该是:
<input type="text" [(ngModel)]="mymodel" (input)="valuechange($event)" />
{{mymodel}}
我只是使用事件输入,它工作得很好如下:
在.html文件中:
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
在.ts文件中:
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
我用下面的代码在Angular 11中解决了这个问题:
<input type="number" min="0" max="50" [value]="input.to" name="to"
(input)="input.to=$event.target.value; experienceToAndFrom()">
并且,experienceToAndFrom()是我的组件中的一个方法。
PS:我尝试了以上所有的解决方案,但都不奏效。
这个问题有多种答案。 然而,如果你想用另一种方式,特别是在你对change事件采取任何行动之前添加一些延迟,那么你可以使用带有angular形式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:['']
});