Angular 10（更改）未在表单输入字段中检测到

Question

当我使用 (change) 检测输入字段更改时，它仅在用户离开输入字段时显示更改。这是 html 代码：

<input type="text"  (change)="check('test')" class="form-control form-control-lg" class="form-control" formControlName="title"  [ngClass]="!rForm.controls['title'].valid && rForm.controls['title'].touched ? 'red-border-class' : 'black-border-class'">

我做错了什么我想在用户转到下一个输入字段后立即检测到更改。

有人可以帮忙吗？

感谢

Answer 1

使用 Keyup 而不是 Change 可能会满足您的要求

<input type="text"  (keyup)="check('test')" class="form-control form-control-lg" class="form-control" formControlName="title" 
      [ngClass]="!rForm.controls['title'].valid && rForm.controls['title'].touched ? 'red-border-class' : 'black-border-class'">

Answer 2

您可以使用 (blur) 事件，它会在您离开输入框后调用

<input (blur)='check('test')'/>

Answer 3

我猜你想使用 (keypress)- 或 (keyup)-Event。

Answer 4

你至少有两种方法可以做到这一点。

使用按键事件

Better description about keyup

<input (keyup)="check('test')">

FormControl的valueChanges

https://angular.io/api/forms/AbstractControl#valueChanges

rForm.controls['title'].valueChanges.subscribe(() => {
  check('test');
});