angular - 当文本框中的值已更改时，更新文本框前景色的最佳方法是什么？

Question

我是 Angular 的新手，所以如果这是一个简单的问题，我深表歉意，但是我无法从我进行的研究中找到针对这个特定问题的任何解决方案。

我有多个动态生成的文本框。我想确保任何值已更改的文本框的文本都将变为红色。

我有一个 css 类来处理这个问题，我尝试使用 [ngClass] 和后面的函数来比较旧值和新值，但我无法在 Angular 中找到获取原始值的方法在编辑之前在文本框中。我也尝试过使用 dirty 和 pristine 但没有这样的运气。

例如

<input class="input" matInput placeholder="Quantity [(ngModel)]="row.valueOneA" name="valueOneA" [ngClass]="{'redForeColour': row.valueOneA.dirty}">

我还尝试在 ts 代码中存储一个变量，然后用于比较目的，但不幸的是，这会将 所有 文本框更改为红色，我只想要具有它的值(value)更新变化。

这并不意味着输入无效/不正确，因此使用表单验证器不适合这种情况。它只是为了向用户表明输入的值已更改，以便他们在保存这些更改之前了解这一点。

是否有更简单的方法来实现这一点，或者在 Angular 中我们是否可以获取文本框中的初始值以进行比较？

Answer 1

在您的模板中，您可以使用 ngStyle 指令和输入标签的 (change) 事件。

.html

<input (change)="flag1=true" [ngStyle]="{
  'color': flag1 ? 'red' : 'black'
}"> 

注意:

既然您已经提到这些文本框是动态的，您总是可以为每个输入框创建一个变量。这里对应的是stackblitz同样。