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

我对 Angular 相对比较新，所以如果这是一个简单的问题请见谅，不过我通过研究没有找到针对这个具体问题的解决方案。

我有多个动态生成的文本框。我想确保任何值被更改的文本框，其文字都会变红。

我有一个 CSS 类来处理这个问题，并且我尝试过使用带有函数的 [ngClass] 来比较旧值和新值，但我找不到在 Angular 中在文本框被编辑之前获取原始值的方法。我也尝试过使用 dirty 和 pristine，但没有成功。

例如

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

我也尝试在 ts 代码中存储一个变量，然后用于比较目的，但不幸的是，这会将所有文本框都变红，而我只希望值被更新的那个文本框改变颜色。

这并不表示输入是无效或错误的，因此使用表单验证器并不适合。这只是为了向用户表明输入的值已经被更改，以便他们在保存这些更改之前能够注意到这一点。

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

答案＃1

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

.html

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

注意：

既然你提到这些文本框是动态的，你可以为每个输入框创建一个变量。这是相应的 Stackblitz 示例。

答案＃2

你需要对 ngModel 的引用，使用 templateRef 或 formControl，

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

或

<input class="input" matInput placeholder="Quantity formControlName="valueOneAControl" [ngClass]="{redForeColour: valueOneAControl.dirty}">