时间戳

首页 > 解决方案 > 当用户“离开”它而不输入任何内容时，角度会改变文本字段的颜色

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

问题描述

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

 <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 文件中调用函数的智能解决方案？

标签： htmlangular

解决方案

您可以通过包含 ng-invalid 来定义外部 css 文件中输入字段的样式，以确保当字段无效时文本字段的颜色会发生变化，并包含 ng-touched 以确保颜色仅在用户触摸时发生变化场至少一次。这将确保您从一开始就没有改变颜色。

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

推荐阅读