当用户“离开”文本字段而不输入任何内容时，用角度更改文本字段的颜色

Question

基本上我已经创建了一个看起来像这样的文本字段

 <input type="text" class="form-control required" [(ngModel)]="formName">

“ CSS类”为必填项，将文本字段的背景更改为黄色。我的目标是每当用户在文本字段内单击（焦点，基本上是想在其中写一些东西）并且不输入任何内容（将其保留为空）时，将该文本字段的背景色更改为红色。

我尝试使用[ngClass]，类似这样的东西：

 <input type="text" class="form-control required"  [(ngModel)]="formName" [ngClass]="{'testRed': !formName}">

问题是，它的开头是红色，因为'formName'从开头是空的，这是正确的。是否有任何智能解决方案，而无需调用.ts文件中的函数？

Answer 1

您还应该检查脏状态。

假设表单名称为frmTest-

<input type="text" class="form-control required"
[(ngModel)]="formName"
[ngClass]="!formName && frmTest.get('formName').dirty ?? 'red' : 'yellow' ">

Answer 2

您可以通过包含ng-invalid以确保文本字段的颜色在字段无效时改变，并包括ng-touched以确保仅当用户具有以下要求时才更改颜色，来定义外部css文件中输入字段的样式：至少触碰过一次。这将确保您从一开始就不会更改颜色。

input.ng-invalid.ng-touched {
    background-color : solid-red;
}